پیشنمایش زنده
کد HTML
<button
class="relative border-2 border-black group hover:border-green-500 w-12 h-12 duration-500 overflow-hidden"
type="button"
>
<p
class="font-Manrope text-3xl h-full w-full flex items-center justify-center text-black duration-500 relative z-10 group-hover:scale-0"
>
×
</p>
<span
class="absolute w-full h-full bg-green-500 rotate-45 group-hover:top-9 duration-500 top-12 left-0"
></span>
<span
class="absolute w-full h-full bg-green-500 rotate-45 top-0 group-hover:left-9 duration-500 left-12"
></span>
<span
class="absolute w-full h-full bg-green-500 rotate-45 top-0 group-hover:right-9 duration-500 right-12"
></span>
<span
class="absolute w-full h-full bg-green-500 rotate-45 group-hover:bottom-9 duration-500 bottom-12 right-0"
></span>
</button>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.bottom-12 {
bottom: 3rem;
}
.left-0 {
left: 0px;
}
.left-12 {
left: 3rem;
}
.right-0 {
right: 0px;
}
.right-12 {
right: 3rem;
}
.top-0 {
top: 0px;
}
.top-12 {
top: 3rem;
}
.z-10 {
z-index: 10;
}
.flex {
display: flex;
}
.h-12 {
height: 3rem;
}
.h-full {
height: 100%;
}
.w-12 {
width: 3rem;
}
.w-full {
width: 100%;
}
.rotate-45 {
--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));
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.overflow-hidden {
overflow: hidden;
}
.border-2 {
border-width: 2px;
}
.border-black {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.duration-500 {
transition-duration: 500ms;
}
.hover\:border-green-500:hover {
--tw-border-opacity: 1;
border-color: rgb(34 197 94 / var(--tw-border-opacity));
}
.group:hover .group-hover\:bottom-9 {
bottom: 2.25rem;
}
.group:hover .group-hover\:left-9 {
left: 2.25rem;
}
.group:hover .group-hover\:right-9 {
right: 2.25rem;
}
.group:hover .group-hover\:top-9 {
top: 2.25rem;
}
.group:hover .group-hover\: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));
}