پیشنمایش زنده
کد HTML
<button class="cursor-pointer font-semibold overflow-hidden relative z-100 border border-green-500 group px-8 py-2">
<span class="relative z-10 text-green-500 group-hover:text-white text-xl duration-500">Magic !</span>
<span class="absolute w-full h-full bg-green-500 -left-32 top-0 -rotate-45 group-hover:rotate-0 group-hover:left-0 duration-500"></span>
<span class="absolute w-full h-full bg-green-500 -right-32 top-0 -rotate-45 group-hover:rotate-0 group-hover:right-0 duration-500"></span>
</button>
کد CSS
.absolute {
position: absolute
}
.relative {
position: relative
}
.-left-32 {
left: -8rem
}
.-right-32 {
right: -8rem
}
.top-0 {
top: 0px
}
.z-10 {
z-index: 10
}
.h-full {
height: 100%
}
.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))
}
.cursor-pointer {
cursor: pointer
}
.overflow-hidden {
overflow: hidden
}
.border {
border-width: 1px
}
.border-green-500 {
--tw-border-opacity: 1;
border-color: rgb(34 197 94 / var(--tw-border-opacity))
}
.bg-green-500 {
--tw-bg-opacity: 1;
background-color: rgb(34 197 94 / var(--tw-bg-opacity))
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
.font-semibold {
font-weight: 600
}
.text-green-500 {
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity))
}
.duration-500 {
transition-duration: 500ms
}
.group:hover .group-hover\:left-0 {
left: 0px
}
.group:hover .group-hover\:right-0 {
right: 0px
}
.group:hover .group-hover\:rotate-0 {
--tw-rotate: 0deg;
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\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity))
}