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

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

کد HTML

<button
  class="group relative p-0 bg-transparent focus:outline-none active:scale-90 transition-all duration-500"
>
  <div
    class="particle absolute left-12 top-0 text-pink-300 opacity-0 group-hover:animate-float-up pointer-events-none"
  >
    ✦
  </div>
  <div
    class="particle absolute right-16 top-2 text-purple-300 opacity-0 group-hover:animate-float-up pointer-events-none"
    style="animation-delay: 0.7s;"
  >
    🌸
  </div>
  <div
    class="particle absolute left-1/2 top-4 text-blue-300 opacity-0 group-hover:animate-float-up pointer-events-none"
    style="animation-delay: 1.2s;"
  >
    ✨
  </div>

  <svg
    class="absolute -top-11 left-6 w-14 h-14 transition-all duration-700 group-hover:-translate-y-3 group-hover:rotate-[-8deg] z-0"
    viewBox="0 0 50 50"
  >
    <path
      d="M8 42C2 35 2 20 8 15"
      stroke="#fcd34d"
      stroke-width="4"
      stroke-linecap="round"
      fill="none"
      class="origin-bottom-left animate-tail-wag"
    ></path>
    <path d="M10 45C10 30 15 15 25 15C35 15 40 30 40 45" fill="#fbbf24"></path>
    <path d="M15 18L8 5L22 15Z" fill="#fbbf24"></path>
    <path d="M15 18L11 9L19 15Z" fill="#fda4af"></path>
    <path d="M35 18L42 5L28 15Z" fill="#fbbf24"></path>
    <path d="M35 18L39 9L31 15Z" fill="#fda4af"></path>
    <g class="group-hover:scale-110 transition-transform origin-center">
      <circle cx="20" cy="28" r="3" fill="white"></circle>
      <circle cx="20" cy="28" r="1.5" fill="#334155"></circle>
      <circle cx="30" cy="28" r="3" fill="white"></circle>
      <circle cx="30" cy="28" r="1.5" fill="#334155"></circle>
    </g>
    <circle cx="16" cy="34" r="2" fill="#fda4af" class="opacity-60"></circle>
    <circle cx="34" cy="34" r="2" fill="#fda4af" class="opacity-60"></circle>
  </svg>

  <svg
    class="absolute -top-10 right-8 w-12 h-12 transition-all duration-700 group-hover:-translate-y-4 group-hover:rotate-[8deg] z-0"
    viewBox="0 0 50 50"
  >
    <path d="M10 45C10 30 15 15 25 15C35 15 40 30 40 45" fill="#fef3c7"></path>
    <path d="M15 18L8 8L22 15Z" fill="#fef3c7"></path>
    <path d="M35 18L42 8L28 15Z" fill="#fef3c7"></path>
    <g class="animate-blink origin-center">
      <circle cx="20" cy="28" r="1.8" fill="#92400e"></circle>
      <circle cx="30" cy="28" r="1.8" fill="#92400e"></circle>
    </g>
    <circle cx="15" cy="33" r="2.5" fill="#fecaca" class="opacity-50"></circle>
    <circle cx="35" cy="33" r="2.5" fill="#fecaca" class="opacity-50"></circle>
  </svg>

  <div
    class="relative z-10 w-64 h-20 rounded-[2rem] bg-gradient-to-br from-white/40 to-white/10 backdrop-blur-md border border-white/30 shadow-[0_10px_30px_rgba(0,0,0,0.05)] group-hover:shadow-[0_20px_40px_rgba(167,139,250,0.2)] flex items-center px-6 transition-all duration-500 overflow-hidden group-hover:scale-105"
  >
    <div
      class="absolute inset-0 bg-gradient-to-r from-purple-100/50 via-pink-100/50 to-blue-100/50 opacity-0 group-hover:opacity-100 transition-opacity duration-700"
    ></div>

    <div class="relative z-20 flex flex-col items-start leading-none ml-2">
      <span
        class="text-[10px] text-purple-400 font-bold uppercase tracking-[0.25em] mb-1 group-hover:text-purple-500 transition-colors"
        >Find a friend</span
      >
      <span
        class="text-slate-700 font-bold text-xl tracking-tight group-hover:text-slate-900 transition-colors"
      >
        Sweet Kitties
      </span>
    </div>

    <div
      class="ml-auto relative z-20 w-10 h-10 rounded-full bg-white/60 flex items-center justify-center shadow-inner transition-transform group-hover:rotate-12"
    >
      <svg
        class="w-6 h-6 text-purple-300 group-hover:text-purple-400 transition-colors"
        viewBox="0 0 24 24"
        fill="currentColor"
      >
        <circle cx="12" cy="16" r="3.5"></circle>
        <circle cx="8" cy="11" r="2"></circle>
        <circle cx="12" cy="8" r="2"></circle>
        <circle cx="16" cy="11" r="2"></circle>
      </svg>
    </div>
  </div>

  <div
    class="absolute inset-0 rounded-[2rem] bg-purple-200/30 scale-90 opacity-0 group-hover:scale-110 group-hover:opacity-100 transition-all duration-700 -z-10"
  ></div>
</button>

کد CSS

/* ! tailwindcss v3.4.17 | MIT License | s://tailwindcss.com */
*,
::after,
::before {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}
::after,
::before {
  --tw-content: "";
}
:host,
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  line-height: inherit;
}
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  color: inherit;
  text-decoration: inherit;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
pre,
samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button,
select {
  text-transform: none;
}
button,
input:where([type="button"]),
input:where([type="reset"]),
input:where([type="submit"]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
:-moz-focusring {
  outline: auto;
}
:-moz-ui-invalid {
  box-shadow: none;
}
progress {
  vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
summary {
  display: list-item;
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
menu,
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
dialog {
  padding: 0;
}
textarea {
  resize: vertical;
}
input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}
[role="button"],
button {
  cursor: pointer;
}
:disabled {
  cursor: default;
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  display: block;
  vertical-align: middle;
}
img,
video {
  max-width: 100%;
  height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.pointer-events-none {
  pointer-events: none;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0px;
}
.-top-10 {
  top: -2.5rem;
}
.-top-11 {
  top: -2.75rem;
}
.left-1\/2 {
  left: 50%;
}
.left-12 {
  left: 3rem;
}
.left-6 {
  left: 1.5rem;
}
.right-16 {
  right: 4rem;
}
.right-8 {
  right: 2rem;
}
.top-0 {
  top: 0px;
}
.top-2 {
  top: 0.5rem;
}
.top-4 {
  top: 1rem;
}
.-z-10 {
  z-index: -10;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.flex {
  display: flex;
}
.h-10 {
  height: 2.5rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-20 {
  height: 5rem;
}
.h-6 {
  height: 1.5rem;
}
.w-10 {
  width: 2.5rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.origin-bottom-left {
  transform-origin: bottom left;
}
.origin-center {
  transform-origin: center;
}
.scale-90 {
  --tw-scale-x: 0.9;
  --tw-scale-y: 0.9;
  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));
}
@keyframes blink {
  0%,
  90%,
  100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.1);
  }
}
.animate-blink {
  animation: blink 4s infinite;
}
@keyframes tail-wag {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(15deg);
  }
}
.animate-tail-wag {
  animation: tail-wag 1.5s ease-in-out infinite;
}
.flex-col {
  flex-direction: column;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.overflow-hidden {
  overflow: hidden;
}
.rounded-\[2rem\] {
  border-radius: 2rem;
}
.rounded-full {
  border-radius: 9999px;
}
.border {
  border-width: 1px;
}
.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3);
}
.bg-purple-200\/30 {
  background-color: rgb(233 213 255 / 0.3);
}
.bg-transparent {
  background-color: transparent;
}
.bg-white\/60 {
  background-color: rgb(255 255 255 / 0.6);
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.from-purple-100\/50 {
  --tw-gradient-from: rgb(243 232 255 / 0.5) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(243 232 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white\/40 {
  --tw-gradient-from: rgb(255 255 255 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-pink-100\/50 {
  --tw-gradient-to: rgb(252 231 243 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from),
    rgb(252 231 243 / 0.5) var(--tw-gradient-via-position),
    var(--tw-gradient-to);
}
.to-blue-100\/50 {
  --tw-gradient-to: rgb(219 234 254 / 0.5) var(--tw-gradient-to-position);
}
.to-white\/10 {
  --tw-gradient-to: rgb(255 255 255 / 0.1) var(--tw-gradient-to-position);
}
.p-0 {
  padding: 0px;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.font-bold {
  font-weight: 700;
}
.uppercase {
  text-transform: uppercase;
}
.leading-none {
  line-height: 1;
}
.tracking-\[0\.25em\] {
  letter-spacing: 0.25em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}
.text-pink-300 {
  --tw-text-opacity: 1;
  color: rgb(249 168 212 / var(--tw-text-opacity, 1));
}
.text-purple-300 {
  --tw-text-opacity: 1;
  color: rgb(216 180 254 / var(--tw-text-opacity, 1));
}
.text-purple-400 {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.opacity-0 {
  opacity: 0;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.shadow-\[0_10px_30px_rgba\(0\2c 0\2c 0\2c 0\.05\)\] {
  --tw-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  --tw-shadow-colored: 0 10px 30px 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-inner {
  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
    var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
    var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
    var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
    var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
    var(--tw-backdrop-sepia);
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property:
    color,
    background-color,
    border-color,
    fill,
    stroke,
    -webkit-text-decoration-color;
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke;
  transition-property:
    color,
    background-color,
    border-color,
    text-decoration-color,
    fill,
    stroke,
    -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-500 {
  transition-duration: 500ms;
}
.duration-700 {
  transition-duration: 700ms;
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.active\:scale-90:active {
  --tw-scale-x: 0.9;
  --tw-scale-y: 0.9;
  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\:-translate-y-3 {
  --tw-translate-y: -0.75rem;
  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\:-translate-y-4 {
  --tw-translate-y: -1rem;
  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\:rotate-12 {
  --tw-rotate: 12deg;
  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\:rotate-\[-8deg\] {
  --tw-rotate: -8deg;
  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\:rotate-\[8deg\] {
  --tw-rotate: 8deg;
  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\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  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));
}
@keyframes float-up {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-30px) scale(1.2);
    opacity: 0;
  }
}
.group:hover .group-hover\:animate-float-up {
  animation: float-up 2s ease-out infinite;
}
.group:hover .group-hover\:text-purple-400 {
  --tw-text-opacity: 1;
  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.group:hover
  .group-hover\:shadow-\[0_20px_40px_rgba\(167\2c
  139\2c
  250\2c
  0\.2\)\] {
  --tw-shadow: 0 20px 40px rgba(167, 139, 250, 0.2);
  --tw-shadow-colored: 0 20px 40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

نوع: button

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

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