پیشنمایش زنده
کد HTML
<button
class="relative inline-flex items-center gap-2 px-6 py-3 font-semibold text-yellow-50 bg-gradient-to-tr from-yellow-900/30 via-yellow-900/70 to-yellow-900/30 ring-4 ring-yellow-900/20 rounded-full overflow-hidden hover:opacity-90 transition-opacity before:absolute before:top-4 before:left-1/2 before:-translate-x-1/2 before:w-[100px] before:h-[100px] before:rounded-full before:bg-gradient-to-b before:from-yellow-50/10 before:blur-xl"
>
Explore discoveries
</button>
کد CSS
.relative{position:relative}.inline-flex{display:inline-flex}.items-center{align-items:center}.gap-2{gap:0.5rem}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.bg-gradient-to-tr{background-image:linear-gradient(to top right, var(--tw-gradient-stops))}.from-yellow-900\/30{--tw-gradient-from:rgb(113 63 18 / 0.3) var(--tw-gradient-from-position);--tw-gradient-to:rgb(113 63 18 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-yellow-900\/70{--tw-gradient-to:rgb(113 63 18 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(113 63 18 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-yellow-900\/30{--tw-gradient-to:rgb(113 63 18 / 0.3) var(--tw-gradient-to-position)}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.font-semibold{font-weight:600}.text-yellow-50{--tw-text-opacity:1;color:rgb(254 252 232 / var(--tw-text-opacity))}.ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.ring-yellow-900\/20{--tw-ring-color:rgb(113 63 18 / 0.2)}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.before\:absolute::before{content:var(--tw-content);position:absolute}.before\:left-1\/2::before{content:var(--tw-content);left:50%}.before\:top-4::before{content:var(--tw-content);top:1rem}.before\:h-\[100px\]::before{content:var(--tw-content);height:100px}.before\:w-\[100px\]::before{content:var(--tw-content);width:100px}.before\:-translate-x-1\/2::before{content:var(--tw-content);--tw-translate-x:-50%;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))}.before\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\:bg-gradient-to-b::before{content:var(--tw-content);background-image:linear-gradient(to bottom, var(--tw-gradient-stops))}.before\:from-yellow-50\/10::before{content:var(--tw-content);--tw-gradient-from:rgb(254 252 232 / 0.1) var(--tw-gradient-from-position);--tw-gradient-to:rgb(254 252 232 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.before\:blur-xl::before{content:var(--tw-content);--tw-blur:blur(24px);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\:opacity-90:hover{opacity:0.9}