پیشنمایش زنده
کد HTML
<button class="group relative w-28 h-12 text-neutral-50 bg-neutral-800 p-2 overflow-hidden">
<p class="absolute font-bold z-10 duration-500"> Button</p>
<div class="">
<div class="absolute duration-500 bg-cyan-600 w-4 h-16 bottom-12 group-hover:-bottom-1 delay-500 right-0"></div>
<div class="absolute duration-500 bg-cyan-600 w-4 h-16 -bottom-16 group-hover:-bottom-1 right-4"></div>
<div class="absolute duration-500 bg-cyan-600 w-4 h-16 bottom-12 group-hover:-bottom-1 delay-500 right-8"></div>
<div class="absolute duration-500 bg-cyan-600 w-4 h-16 -bottom-16 group-hover:-bottom-1 right-12"></div>
<div class="absolute duration-500 bg-cyan-600 w-4 h-16 bottom-12 group-hover:-bottom-1 delay-500 right-16"></div>
<div class="absolute duration-500 bg-cyan-600 w-4 h-16 -bottom-16 group-hover:-bottom-1 right-20"></div>
<div class="absolute duration-500 bg-cyan-600 w-4 h-16 bottom-12 group-hover:-bottom-1 delay-500 right-24"></div>
</div>
</button>
کد CSS
.absolute {
position: absolute
}
.relative {
position: relative
}
.-bottom-16 {
bottom: -4rem
}
.bottom-12 {
bottom: 3rem
}
.right-0 {
right: 0px
}
.right-12 {
right: 3rem
}
.right-16 {
right: 4rem
}
.right-20 {
right: 5rem
}
.right-24 {
right: 6rem
}
.right-4 {
right: 1rem
}
.right-8 {
right: 2rem
}
.z-10 {
z-index: 10
}
.h-12 {
height: 3rem
}
.h-16 {
height: 4rem
}
.w-28 {
width: 7rem
}
.w-4 {
width: 1rem
}
.overflow-hidden {
overflow: hidden
}
.bg-cyan-600 {
--tw-bg-opacity: 1;
background-color: rgb(8 145 178 / var(--tw-bg-opacity))
}
.bg-neutral-800 {
--tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity))
}
.p-2 {
padding: 0.5rem
}
.font-bold {
font-weight: 700
}
.text-neutral-50 {
--tw-text-opacity: 1;
color: rgb(250 250 250 / var(--tw-text-opacity))
}
.delay-500 {
transition-delay: 500ms
}
.duration-500 {
transition-duration: 500ms
}
.group:hover .group-hover\:-bottom-1 {
bottom: -0.25rem
}