Interactive Glow Button with Radial Hover Effect

<button class="group sm:w-auto overflow-hidden transition-all duration-300 hover:shadow-[0_0_40px_-10px_rgba(14,165,233,0.6)] hover:scale-[1.02] w-full rounded-full pt-[1px] pr-[1px] pb-[1px] pl-[1px] relative" onmousemove="const rect = this.getBoundingClientRect(); this.style.setProperty('--x', (event.clientX - rect.left) + 'px'); this.style.setProperty('--y', (event.clientY - rect.top) + 'px');" style="--x: 10.33343505859375px; --y: -0.97998046875px">
            <!-- Dynamic Glow Background -->
            <span class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="background: radial-gradient(300px circle at var(--x) var(--y), #0ea5e9, #3b82f6, transparent 60%);"></span>
            <!-- Default Border State -->
            <span class="absolute inset-0 bg-white/20 opacity-100 group-hover:opacity-0 transition-opacity duration-300"></span>
            
            <!-- Button Content -->
            <span class="flex items-center justify-center gap-2 transition-all duration-300 group-hover:bg-black/90 text-sm font-semibold text-white bg-black w-full h-full border-white/5 border rounded-full pt-3.5 pr-8 pb-3.5 pl-8 relative backdrop-blur-3xl">
              Start Deploying
              <iconify-icon icon="lucide:arrow-right" class="text-sky-400 transition-transform duration-300 group-hover:translate-x-1"></iconify-icon>
            </span>
          </button>