پیشنمایش زنده
کد HTML
<button
class="group w-12 hover:w-44 h-12 hover:bg-sky-600 relative bg-sky-700 rounded text-neutral-50 duration-700 before:duration-700 before:hover:500 font-bold flex justify-start gap-2 items-center p-2 pr-6 before:absolute before:-z-10 before:left-8 before:hover:left-40 before:w-6 before:h-6 before:bg-sky-700 before:hover:bg-sky-600 before:rotate-45"
>
<svg
y="0"
xmlns="http://www.w3.org/2000/svg"
x="0"
width="100"
viewBox="0 0 100 100"
preserveAspectRatio="xMidYMid meet"
height="100"
class="w-8 h-8 shrink-0 fill-neutral-50"
>
<path
d="M92.86,0H7.12A7.17,7.17,0,0,0,0,7.21V92.79A7.17,7.17,0,0,0,7.12,100H92.86A7.19,7.19,0,0,0,100,92.79V7.21A7.19,7.19,0,0,0,92.86,0ZM30.22,85.71H15.4V38H30.25V85.71ZM22.81,31.47a8.59,8.59,0,1,1,8.6-8.59A8.6,8.6,0,0,1,22.81,31.47Zm63,54.24H71V62.5c0-5.54-.11-12.66-7.7-12.66s-8.91,6-8.91,12.26V85.71H39.53V38H53.75v6.52H54c2-3.75,6.83-7.7,14-7.7,15,0,17.79,9.89,17.79,22.74Z"
></path>
</svg>
<span
class="origin-left inline-flex duration-100 group-hover:duration-300 group-hover:delay-500 opacity-0 group-hover:opacity-100 border-l-2 px-1 transform scale-x-0 group-hover:scale-x-100 transition-all"
>Your Name</span
>
</button>
کد CSS
.relative {
position: relative;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.h-12 {
height: 3rem;
}
.h-8 {
height: 2rem;
}
.w-12 {
width: 3rem;
}
.w-8 {
width: 2rem;
}
.shrink-0 {
flex-shrink: 0;
}
.origin-left {
transform-origin: left;
}
.scale-x-0 {
--tw-scale-x: 0;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.items-center {
align-items: center;
}
.justify-start {
justify-content: flex-start;
}
.gap-2 {
gap: 0.5rem;
}
.rounded {
border-radius: 0.25rem;
}
.border-l-2 {
border-left-width: 2px;
}
.bg-sky-700 {
--tw-bg-opacity: 1;
background-color: rgb(3 105 161 / var(--tw-bg-opacity));
}
.fill-neutral-50 {
fill: #fafafa;
}
.p-2 {
padding: 0.5rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.pr-6 {
padding-right: 1.5rem;
}
.font-bold {
font-weight: 700;
}
.text-neutral-50 {
--tw-text-opacity: 1;
color: rgb(250 250 250 / var(--tw-text-opacity));
}
.opacity-0 {
opacity: 0;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-100 {
transition-duration: 100ms;
}
.duration-700 {
transition-duration: 700ms;
}
.before\:absolute::before {
content: var(--tw-content);
position: absolute;
}
.before\:left-8::before {
content: var(--tw-content);
left: 2rem;
}
.before\:-z-10::before {
content: var(--tw-content);
z-index: -10;
}
.before\:h-6::before {
content: var(--tw-content);
height: 1.5rem;
}
.before\:w-6::before {
content: var(--tw-content);
width: 1.5rem;
}
.before\:rotate-45::before {
content: var(--tw-content);
--tw-rotate: 45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.before\:bg-sky-700::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(3 105 161 / var(--tw-bg-opacity));
}
.before\:duration-700::before {
content: var(--tw-content);
transition-duration: 700ms;
}
.hover\:w-44:hover {
width: 11rem;
}
.hover\:bg-sky-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(2 132 199 / var(--tw-bg-opacity));
}
.before\:hover\:left-40:hover::before {
content: var(--tw-content);
left: 10rem;
}
.before\:hover\:bg-sky-600:hover::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(2 132 199 / var(--tw-bg-opacity));
}
.group:hover .group-hover\:scale-x-100 {
--tw-scale-x: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:opacity-100 {
opacity: 1;
}
.group:hover .group-hover\:delay-500 {
transition-delay: 500ms;
}
.group:hover .group-hover\:duration-300 {
transition-duration: 300ms;
}