پیشنمایش زنده
کد HTML
<button
class="overflow-hidden relative w-32 p-2 h-12 bg-black text-white border-none rounded-md text-xl font-bold cursor-pointer relative z-10 group"
>
Hover me!
<span
class="absolute w-36 h-32 -top-8 -left-2 bg-sky-200 rotate-12 transform scale-x-0 group-hover:scale-x-100 transition-transform group-hover:duration-500 duration-1000 origin-right"
></span>
<span
class="absolute w-36 h-32 -top-8 -left-2 bg-sky-400 rotate-12 transform scale-x-0 group-hover:scale-x-100 transition-transform group-hover:duration-700 duration-700 origin-right"
></span>
<span
class="absolute w-36 h-32 -top-8 -left-2 bg-sky-600 rotate-12 transform scale-x-0 group-hover:scale-x-100 transition-transform group-hover:duration-1000 duration-500 origin-right"
></span>
<span
class="group-hover:opacity-100 group-hover:duration-1000 duration-100 opacity-0 absolute top-2.5 left-6 z-10"
>Explore!</span
>
</button>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.-left-2 {
left: -0.5rem;
}
.-top-8 {
top: -2rem;
}
.left-6 {
left: 1.5rem;
}
.top-2 {
top: 0.5rem;
}
.top-2\.5 {
top: 0.625rem;
}
.z-10 {
z-index: 10;
}
.h-12 {
height: 3rem;
}
.h-32 {
height: 8rem;
}
.w-32 {
width: 8rem;
}
.w-36 {
width: 9rem;
}
.origin-right {
transform-origin: right;
}
.rotate-12 {
--tw-rotate: 12deg;
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));
}
.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));
}
.cursor-pointer {
cursor: pointer;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-md {
border-radius: 0.375rem;
}
.border-none {
border-style: none;
}
.bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-sky-200 {
--tw-bg-opacity: 1;
background-color: rgb(186 230 253 / var(--tw-bg-opacity));
}
.bg-sky-400 {
--tw-bg-opacity: 1;
background-color: rgb(56 189 248 / var(--tw-bg-opacity));
}
.bg-sky-600 {
--tw-bg-opacity: 1;
background-color: rgb(2 132 199 / var(--tw-bg-opacity));
}
.p-2 {
padding: 0.5rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.font-bold {
font-weight: 700;
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.opacity-0 {
opacity: 0;
}
.transition-transform {
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-100 {
transition-duration: 100ms;
}
.duration-1000 {
transition-duration: 1000ms;
}
.duration-500 {
transition-duration: 500ms;
}
.duration-700 {
transition-duration: 700ms;
}
.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\:duration-1000 {
transition-duration: 1000ms;
}
.group:hover .group-hover\:duration-500 {
transition-duration: 500ms;
}
.group:hover .group-hover\:duration-700 {
transition-duration: 700ms;
}