پیشنمایش زنده
کد HTML
<div class="relative group">
<div
class="relative w-64 h-14 opacity-90 overflow-hidden rounded-xl bg-black z-10"
>
<div
class="absolute z-10 -translate-x-44 group-hover:translate-x-[30rem] ease-in transistion-all duration-700 h-full w-44 bg-gradient-to-r from-gray-500 to-white/10 opacity-30 -skew-x-12"
></div>
<div
class="absolute flex items-center justify-center text-white z-[1] opacity-90 rounded-2xl inset-0.5 bg-black"
>
<button
name="text"
class="input font-semibold text-lg h-full opacity-90 w-full px-16 py-3 rounded-xl bg-black"
>
Get Started
</button>
</div>
<div
class="absolute duration-1000 group-hover:animate-spin w-full h-[100px] bg-gradient-to-r from-green-500 to-yellow-500 blur-[30px]"
></div>
</div>
</div>
کد CSS
.absolute{position:absolute}.relative{position:relative}.inset-0\.5{inset:0.125rem}.z-10{z-index:10}.z-\[1\]{z-index:1}.flex{display:flex}.h-14{height:3.5rem}.h-\[100px\]{height:100px}.h-full{height:100%}.w-44{width:11rem}.w-64{width:16rem}.w-full{width:100%}.-translate-x-44{--tw-translate-x:-11rem;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))}.-skew-x-12{--tw-skew-x:-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))}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.rounded-xl{border-radius:0.75rem}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-gray-500{--tw-gradient-from:#6b7280 var(--tw-gradient-from-position);--tw-gradient-to:rgb(107 114 128 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-green-500{--tw-gradient-from:#22c55e var(--tw-gradient-from-position);--tw-gradient-to:rgb(34 197 94 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-white\/10{--tw-gradient-to:rgb(255 255 255 / 0.1) var(--tw-gradient-to-position)}.to-yellow-500{--tw-gradient-to:#eab308 var(--tw-gradient-to-position)}.px-16{padding-left:4rem;padding-right:4rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-semibold{font-weight:600}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.opacity-30{opacity:0.3}.opacity-90{opacity:0.9}.blur-\[30px\]{--tw-blur:blur(30px);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)}.duration-1000{transition-duration:1000ms}.duration-700{transition-duration:700ms}.ease-in{transition-timing-function:cubic-bezier(0.4, 0, 1, 1)}.group:hover .group-hover\:translate-x-\[30rem\]{--tw-translate-x:30rem;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 spin{to{transform:rotate(360deg)}}.group:hover .group-hover\:animate-spin{animation:spin 1s linear infinite}