پیشنمایش زنده
کد HTML
<button
class="text-xl w-32 h-12 rounded bg-emerald-500 text-white relative overflow-hidden group z-10 hover:text-white duration-1000"
>
<span
class="absolute bg-emerald-600 w-36 h-36 rounded-full group-hover:scale-100 scale-0 -z-10 -left-2 -top-10 group-hover:duration-500 duration-700 origin-center transform transition-all"
></span>
<span
class="absolute bg-emerald-800 w-36 h-36 -left-2 -top-10 rounded-full group-hover:scale-100 scale-0 -z-10 group-hover:duration-700 duration-500 origin-center transform transition-all"
></span>
Button
</button>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.-left-2 {
left: -0.5rem;
}
.-top-10 {
top: -2.5rem;
}
.-z-10 {
z-index: -10;
}
.z-10 {
z-index: 10;
}
.h-12 {
height: 3rem;
}
.h-36 {
height: 9rem;
}
.w-32 {
width: 8rem;
}
.w-36 {
width: 9rem;
}
.origin-center {
transform-origin: center;
}
.scale-0 {
--tw-scale-x: 0;
--tw-scale-y: 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));
}
.overflow-hidden {
overflow: hidden;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-full {
border-radius: 9999px;
}
.bg-emerald-500 {
--tw-bg-opacity: 1;
background-color: rgb(16 185 129 / var(--tw-bg-opacity));
}
.bg-emerald-600 {
--tw-bg-opacity: 1;
background-color: rgb(5 150 105 / var(--tw-bg-opacity));
}
.bg-emerald-800 {
--tw-bg-opacity: 1;
background-color: rgb(6 95 70 / var(--tw-bg-opacity));
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-1000 {
transition-duration: 1000ms;
}
.duration-500 {
transition-duration: 500ms;
}
.duration-700 {
transition-duration: 700ms;
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.group:hover .group-hover\:scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 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\:duration-500 {
transition-duration: 500ms;
}
.group:hover .group-hover\:duration-700 {
transition-duration: 700ms;
}