پیش‌نمایش زنده
کد 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
}
نوع: button
تاریخ ایجاد: 2026/06/05
آخرین بروزرسانی: 2026/06/05