پیشنمایش زنده
کد HTML
<button
class="group relative flex flex-row items-center bg-[#212121] justify-center gap-2 rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] transition-shadow duration-500 ease-out hover:shadow-[inset_0_-5px_10px_#8fdfff3f]"
>
<div
class="absolute inset-0 block h-full w-full animate-gradient bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] p-[1px] ![mask-composite:subtract]"
></div>
<svg
class="size-4 text-[#ffaa40]"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 15 15"
height="15"
width="15"
>
<path
clip-rule="evenodd"
fill-rule="evenodd"
fill="currentColor"
d="M5 4.63601C5 3.76031 5.24219 3.1054 5.64323 2.67357C6.03934 2.24705 6.64582 1.9783 7.5014 1.9783C8.35745 1.9783 8.96306 2.24652 9.35823 2.67208C9.75838 3.10299 10 3.75708 10 4.63325V5.99999H5V4.63601ZM4 5.99999V4.63601C4 3.58148 4.29339 2.65754 4.91049 1.99307C5.53252 1.32329 6.42675 0.978302 7.5014 0.978302C8.57583 0.978302 9.46952 1.32233 10.091 1.99162C10.7076 2.65557 11 3.57896 11 4.63325V5.99999H12C12.5523 5.99999 13 6.44771 13 6.99999V13C13 13.5523 12.5523 14 12 14H3C2.44772 14 2 13.5523 2 13V6.99999C2 6.44771 2.44772 5.99999 3 5.99999H4ZM3 6.99999H12V13H3V6.99999Z"
></path>
</svg>
<div
class="shrink-0 bg-border w-[1px] h-4"
role="none"
data-orientation="vertical"
></div>
<span
class="inline animate-gradient whitespace-pre bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent [--bg-size:300%] text-center"
>Get Access</span
>
<svg
stroke-linecap="round"
class="text-[#9c40ff]"
stroke-width="1.5"
aria-hidden="true"
viewBox="0 0 10 10"
height="11"
width="11"
stroke="currentColor"
fill="none"
>
<path
stroke-linecap="round"
d="M0 5h7"
class="opacity-0 transition group-hover:opacity-100"
></path>
<path
stroke-linecap="round"
d="M1 1l4 4-4 4"
class="transition group-hover:translate-x-[3px]"
></path>
</svg>
</button>
کد CSS
.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.block{display:block}.inline{display:inline}.flex{display:flex}.size-4{width:1rem;height:1rem}.h-4{height:1rem}.h-full{height:100%}.w-\[1px\]{width:1px}.w-full{width:100%}.shrink-0{flex-shrink:0}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.whitespace-pre{white-space:pre}.rounded-2xl{border-radius:1rem}.bg-\[\#212121\]{--tw-bg-opacity:1;background-color:rgb(33 33 33 / var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-\[\#ffaa40\]{--tw-gradient-from:#ffaa40 var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 170 64 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#ffaa40\]\/50{--tw-gradient-from:rgb(255 170 64 / 0.5) var(--tw-gradient-from-position);--tw-gradient-to:rgb(255 170 64 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-\[\#9c40ff\]{--tw-gradient-to:rgb(156 64 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #9c40ff var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-\[\#9c40ff\]\/50{--tw-gradient-to:rgb(156 64 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), rgb(156 64 255 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-\[\#ffaa40\]{--tw-gradient-to:#ffaa40 var(--tw-gradient-to-position)}.to-\[\#ffaa40\]\/50{--tw-gradient-to:rgb(255 170 64 / 0.5) var(--tw-gradient-to-position)}.bg-\[length\:var\(--bg-size\)_100\%\]{background-size:var(--bg-size) 100%}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-\[1px\]{padding:1px}.px-4{padding-left:1rem;padding-right:1rem}.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}.text-center{text-align:center}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-medium{font-weight:500}.text-\[\#9c40ff\]{--tw-text-opacity:1;color:rgb(156 64 255 / var(--tw-text-opacity))}.text-\[\#ffaa40\]{--tw-text-opacity:1;color:rgb(255 170 64 / var(--tw-text-opacity))}.text-transparent{color:transparent}.opacity-0{opacity:0}.shadow-\[inset_0_-8px_10px_\#8fdfff1f\]{--tw-shadow:inset 0 -8px 10px #8fdfff1f;--tw-shadow-colored:inset 0 -8px 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)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-500{transition-duration:500ms}.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.\[--bg-size\:300\%\]{--bg-size:300%}.\[border-radius\:inherit\]{border-radius:inherit}.\!\[mask-composite\:subtract\]{-webkit-mask-composite:source-out !important;mask-composite:subtract !important}.\[mask\:linear-gradient\(\#fff_0_0\)_content-box\2c linear-gradient\(\#fff_0_0\)\]{-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)}.hover\:shadow-\[inset_0_-5px_10px_\#8fdfff3f\]:hover{--tw-shadow:inset 0 -5px 10px #8fdfff3f;--tw-shadow-colored:inset 0 -5px 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)}.group:hover .group-hover\:translate-x-\[3px\]{--tw-translate-x:3px;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\:opacity-100{opacity:1}