پیشنمایش زنده
کد HTML
<div
class="div h-[8em] w-[15em] bg-white m-auto rounded-[1em] relative group p-2 z-0 overflow-hidden"
>
<div
class="z-[-1] h-full w-[200%] rounded-[1em] bg-gradient-to-br from-green-400 via-lime-400 to-yellow-400 absolute bottom-full right-0 group-hover:-rotate-90 group-hover:h-[300%] duration-500 origin-bottom-right"
></div>
<button
class="text-[0.8em] absolute bottom-[1em] left-[1em] text-[#6C3082] group-hover:text-[white]"
>
<span
class="relative before:h-[0.16em] before:absolute before:w-full before:content-[''] before:bg-[#6C3082] group-hover:before:bg-[white] duration-50 before:bottom-0 before:left-0"
>More Info</span
>
<i class="fa-solid fa-arrow-right"></i>
</button>
<h1
class="z-20 font-bold font-Poppin group-hover:text-white delay-150 text-[1.4em]"
>
HEADING
</h1>
</div>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.bottom-\[1em\] {
bottom: 1em;
}
.bottom-full {
bottom: 100%;
}
.left-\[1em\] {
left: 1em;
}
.right-0 {
right: 0px;
}
.z-0 {
z-index: 0;
}
.z-20 {
z-index: 20;
}
.z-\[-1\] {
z-index: -1;
}
.m-auto {
margin: auto;
}
.h-\[8em\] {
height: 8em;
}
.h-full {
height: 100%;
}
.w-\[15em\] {
width: 15em;
}
.w-\[200\%\] {
width: 200%;
}
.origin-bottom-right {
transform-origin: bottom right;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-\[1em\] {
border-radius: 1em;
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-gradient-to-br {
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.from-green-400 {
--tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-lime-400 {
--tw-gradient-to: rgb(163 230 53 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from),
#a3e635 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-yellow-400 {
--tw-gradient-to: #facc15 var(--tw-gradient-to-position);
}
.p-2 {
padding: 0.5rem;
}
.text-\[0\.8em\] {
font-size: 0.8em;
}
.text-\[1\.4em\] {
font-size: 1.4em;
}
.font-bold {
font-weight: 700;
}
.text-\[\#6C3082\] {
--tw-text-opacity: 1;
color: rgb(108 48 130 / var(--tw-text-opacity));
}
.delay-150 {
transition-delay: 150ms;
}
.duration-500 {
transition-duration: 500ms;
}
.before\:absolute::before {
content: var(--tw-content);
position: absolute;
}
.before\:bottom-0::before {
content: var(--tw-content);
bottom: 0px;
}
.before\:left-0::before {
content: var(--tw-content);
left: 0px;
}
.before\:h-\[0\.16em\]::before {
content: var(--tw-content);
height: 0.16em;
}
.before\:w-full::before {
content: var(--tw-content);
width: 100%;
}
.before\:bg-\[\#6C3082\]::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(108 48 130 / var(--tw-bg-opacity));
}
.before\:content-\[\'\'\]::before {
--tw-content: "";
content: var(--tw-content);
}
.group:hover .group-hover\:h-\[300\%\] {
height: 300%;
}
.group:hover .group-hover\:-rotate-90 {
--tw-rotate: -90deg;
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));
}
.group:hover .group-hover\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.group:hover .group-hover\:before\:bg-\[white\]::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}