پیشنمایش زنده
کد HTML
<button
class="relative inline-flex h-12 active:scale-95 transistion overflow-hidden rounded-lg p-[1px] focus:outline-none"
>
<span
class="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#e7029a_0%,#f472b6_50%,#bd5fff_100%)]"
>
</span>
<span
class="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-lg bg-slate-950 px-7 text-sm font-medium text-white backdrop-blur-3xl gap-2 undefined"
>
Contact me
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 448 512"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M429.6 92.1c4.9-11.9 2.1-25.6-7-34.7s-22.8-11.9-34.7-7l-352 144c-14.2 5.8-22.2 20.8-19.3 35.8s16.1 25.8 31.4 25.8H224V432c0 15.3 10.8 28.4 25.8 31.4s30-5.1 35.8-19.3l144-352z"
></path>
</svg>
</span>
</button>
کد CSS
.absolute{position:absolute}.relative{position:relative}.inset-\[-1000\%\]{inset:-1000%}.inline-flex{display:inline-flex}.h-12{height:3rem}.h-full{height:100%}.w-full{width:100%}@keyframes spin{to{transform:rotate(360deg)}}.animate-\[spin_2s_linear_infinite\]{animation:spin 2s linear infinite}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.overflow-hidden{overflow:hidden}.rounded-lg{border-radius:0.5rem}.bg-slate-950{--tw-bg-opacity:1;background-color:rgb(2 6 23 / var(--tw-bg-opacity))}.bg-\[conic-gradient\(from_90deg_at_50\%_50\%\2c \#e7029a_0\%\2c \#f472b6_50\%\2c \#bd5fff_100\%\)\]{background-image:conic-gradient(from 90deg at 50% 50%,#e7029a 0%,#f472b6 50%,#bd5fff 100%)}.p-\[1px\]{padding:1px}.px-7{padding-left:1.75rem;padding-right:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.backdrop-blur-3xl{--tw-backdrop-blur:blur(64px);-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)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95;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))}