پیش‌نمایش زنده
کد HTML
<button class="bg-orange-950 text-orange-400 border border-orange-400 border-b-4 font-medium overflow-hidden relative px-4 py-2 rounded-md hover:brightness-150 hover:border-t-4 hover:border-b active:opacity-75 outline-none duration-300 group">
  <span class="bg-orange-400 shadow-orange-400 absolute -top-[150%] left-0 inline-flex w-80 h-[5px] rounded-md opacity-50 group-hover:top-[150%] duration-500 shadow-[0_0_10px_10px_rgba(0,0,0,0.3)]"></span>
  Hover Me
</button>
کد CSS
.absolute {
  position: absolute
}

.relative {
  position: relative
}

.-top-\[150\%\] {
  top: -150%
}

.left-0 {
  left: 0px
}

.inline-flex {
  display: inline-flex
}

.h-\[5px\] {
  height: 5px
}

.w-80 {
  width: 20rem
}

.overflow-hidden {
  overflow: hidden
}

.rounded-md {
  border-radius: 0.375rem
}

.border {
  border-width: 1px
}

.border-b-4 {
  border-bottom-width: 4px
}

.border-orange-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 146 60 / var(--tw-border-opacity))
}

.bg-orange-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity))
}

.bg-orange-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(67 20 7 / var(--tw-bg-opacity))
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem
}

.font-medium {
  font-weight: 500
}

.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity))
}

.opacity-50 {
  opacity: 0.5
}

.shadow-\[0_0_10px_10px_rgba\(0\2c 0\2c 0\2c 0\.3\)\] {
  --tw-shadow: 0 0 10px 10px rgba(0,0,0,0.3);
  --tw-shadow-colored: 0 0 10px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-orange-400 {
  --tw-shadow-color: #fb923c;
  --tw-shadow: var(--tw-shadow-colored)
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px
}

.duration-300 {
  transition-duration: 300ms
}

.duration-500 {
  transition-duration: 500ms
}

.hover\:border-b:hover {
  border-bottom-width: 1px
}

.hover\:border-t-4:hover {
  border-top-width: 4px
}

.hover\:brightness-150:hover {
  --tw-brightness: brightness(1.5);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.active\:opacity-75:active {
  opacity: 0.75
}

.group:hover .group-hover\:top-\[150\%\] {
  top: 150%
}
نوع: button
تاریخ ایجاد: 2026/06/05
آخرین بروزرسانی: 2026/06/05