button | کتابخانه کامپوننت‌ها

پیش‌نمایش زنده

کد HTML

<button class="group group-hover:before:duration-500 group-hover:after:duration-1000 after:duration-500 hover:border-sky-300  duration-500 before:duration-500 hover:duration-500 underline underline-offset-2    hover:after:-right-2 hover:before:top-8 hover:before:right-16 hover:after:scale-150 hover:after:blur-none hover:before:-bottom-8 hover:before:blur-none hover:bg-sky-300 hover:underline hover:underline-offset-4  origin-left hover:decoration-2 hover:text-sky-900 relative bg-sky-800 h-16 w-64 border text-left p-3 text-gray-50 text-base font-bold rounded-lg  overflow-hidden  before:absolute before:w-12 before:h-12 before:content[''] before:right-1 before:top-1 before:z-10 before:bg-sky-400 before:rounded-full before:blur-lg  after:absolute after:z-10 after:w-20 after:h-20 after:content['']  after:bg-cyan-600 after:right-8 after:top-3 after:rounded-full after:blur">
  See more
</button>

کد CSS

.relative {
  position: relative
}

.h-16 {
  height: 4rem
}

.w-64 {
  width: 16rem
}

.origin-left {
  transform-origin: left
}

.overflow-hidden {
  overflow: hidden
}

.rounded-lg {
  border-radius: 0.5rem
}

.border {
  border-width: 1px
}

.bg-sky-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(7 89 133 / var(--tw-bg-opacity))
}

.p-3 {
  padding: 0.75rem
}

.text-left {
  text-align: left
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem
}

.font-bold {
  font-weight: 700
}

.text-gray-50 {
  --tw-text-opacity: 1;
  color: rgb(249 250 251 / var(--tw-text-opacity))
}

.underline {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline
}

.underline-offset-2 {
  text-underline-offset: 2px
}

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

.before\:absolute::before {
  content: var(--tw-content);
  position: absolute
}

.before\:right-1::before {
  content: var(--tw-content);
  right: 0.25rem
}

.before\:top-1::before {
  content: var(--tw-content);
  top: 0.25rem
}

.before\:z-10::before {
  content: var(--tw-content);
  z-index: 10
}

.before\:h-12::before {
  content: var(--tw-content);
  height: 3rem
}

.before\:w-12::before {
  content: var(--tw-content);
  width: 3rem
}

.before\:rounded-full::before {
  content: var(--tw-content);
  border-radius: 9999px
}

.before\:bg-sky-400::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(56 189 248 / var(--tw-bg-opacity))
}

.before\:blur-lg::before {
  content: var(--tw-content);
  --tw-blur: blur(16px);
  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)
}

.before\:duration-500::before {
  content: var(--tw-content);
  transition-duration: 500ms
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute
}

.after\:right-8::after {
  content: var(--tw-content);
  right: 2rem
}

.after\:top-3::after {
  content: var(--tw-content);
  top: 0.75rem
}

.after\:z-10::after {
  content: var(--tw-content);
  z-index: 10
}

.after\:h-20::after {
  content: var(--tw-content);
  height: 5rem
}

.after\:w-20::after {
  content: var(--tw-content);
  width: 5rem
}

.after\:rounded-full::after {
  content: var(--tw-content);
  border-radius: 9999px
}

.after\:bg-cyan-600::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(8 145 178 / var(--tw-bg-opacity))
}

.after\:blur::after {
  content: var(--tw-content);
  --tw-blur: blur(8px);
  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)
}

.after\:duration-500::after {
  content: var(--tw-content);
  transition-duration: 500ms
}

.hover\:border-sky-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(125 211 252 / var(--tw-border-opacity))
}

.hover\:bg-sky-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(125 211 252 / var(--tw-bg-opacity))
}

.hover\:text-sky-900:hover {
  --tw-text-opacity: 1;
  color: rgb(12 74 110 / var(--tw-text-opacity))
}

.hover\:underline:hover {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline
}

.hover\:decoration-2:hover {
  text-decoration-thickness: 2px
}

.hover\:underline-offset-4:hover {
  text-underline-offset: 4px
}

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

.hover\:before\:-bottom-8:hover::before {
  content: var(--tw-content);
  bottom: -2rem
}

.hover\:before\:right-16:hover::before {
  content: var(--tw-content);
  right: 4rem
}

.hover\:before\:top-8:hover::before {
  content: var(--tw-content);
  top: 2rem
}

.hover\:before\:blur-none:hover::before {
  content: var(--tw-content);
  --tw-blur: blur(0);
  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)
}

.hover\:after\:-right-2:hover::after {
  content: var(--tw-content);
  right: -0.5rem
}

.hover\:after\:scale-150:hover::after {
  content: var(--tw-content);
  --tw-scale-x: 1.5;
  --tw-scale-y: 1.5;
  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))
}

.hover\:after\:blur-none:hover::after {
  content: var(--tw-content);
  --tw-blur: blur(0);
  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)
}

.group:hover .group-hover\:before\:duration-500::before {
  content: var(--tw-content);
  transition-duration: 500ms
}

.group:hover .group-hover\:after\:duration-1000::after {
  content: var(--tw-content);
  transition-duration: 1000ms
}

نوع: button

تاریخ ایجاد: 2026/06/05

آخرین بروزرسانی: 2026/06/05