Interactive CTA Button with Gradient Hover Effects

<a href="#contact" class="relative inline-flex items-center justify-center gap-2 overflow-hidden transition-all duration-300 hover:ring-green-400/60 hover:shadow-[0_0_0_1px_rgba(16,185,129,0.35),0_40px_80px_rgba(16,185,129,0.18)] cursor-pointer uppercase text-base font-semibold text-white tracking-tight rounded-full pt-3 pr-3 pb-3 pl-3 shadow-2xl blur-none backdrop-blur-2xl" style="--main-color: rgb(46, 213, 115); --main-bg-color: rgba(46, 213, 116, 0.36); --pattern-color: rgba(46, 213, 116, 0.073); filter: hue-rotate(0deg); letter-spacing: 0.5rem; background-size: cover, 15px 15px, 15px 15px; background-position: center center, center center, center center; border-image: radial-gradient(circle, var(--main-color) 0%, rgba(0, 0, 0, 0) 100%) 1; border-width: 1px 0px; border-style: solid; color: var(--main-color); padding: 1rem 3rem; font-weight: 700; font-size: 1.5rem;" onmouseover="this.style.backgroundSize = 'cover, 10px 10px, 10px 10px'" onmouseout="this.style.backgroundSize = 'cover, 15px 15px, 15px 15px'" onmousedown="this.style.filter = 'hue-rotate(250deg)'" onmouseup="this.style.filter = 'hue-rotate(0deg)'">
    <span class="relative z-[1] text-sm">Get started</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right relative z-[1] w-4 h-4 group-hover:translate-x-2 transition-transform duration-300" data-icon-replaced="true" style="color: var(--main-color);"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
    <span aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-all duration-300 animate-fadeInUp" style="animation-play-state: running;"></span>
    <span aria-hidden="true" class="pointer-events-none absolute inset-[1px] rounded-full" style="background: radial-gradient(120% 80% at 50% -20%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.06) 55%, rgba(255,255,255,0) 60%), radial-gradient(90% 80% at 50% 120%, rgba(16,185,129,0.18) 0%, rgba(16,185,129,0) 60%);"></span>
</a>