Animated Purple Glow CTA Button

<button class="glitch-btn transition-all duration-300 hover:border-violet-600 hover:shadow-[0_10px_10px_-10px_rgb(87,42,192)] hover:[text-shadow:-1px_-1px_0px_#1df2f0,1px_1px_0px_#291C6C] group text-sm font-semibold text-white bg-transparent border-transparent border rounded-md mt-8 mb-8 pt-3 pr-12 pb-3 pl-12 relative">
  Let's Talk
  
  <!-- Animated purple glow overlay -->
  <div class="absolute inset-0 rounded-md opacity-0 group-hover:opacity-100 pointer-events-none transition-all duration-500 overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-600/30 to-violet-600/50" style="animation: glowSlideDown 0.5s ease-out forwards;"></div>
  </div>
  
  <!-- Bottom vignette -->
  <div class="pointer-events-none absolute inset-x-0 bottom-0 h-72">
    <div class="absolute inset-x-0 bottom-0 h-full" style="background: radial-gradient(70% 100% at 50% 100%, rgba(88,28,135,0.35) 0%, rgba(24,24,32,0.0) 60%); filter: blur(24px);"></div>
  </div>
  
  <!-- Subtle purple gradient line -->
  <div aria-hidden="true" class="pointer-events-none absolute top-0 left-0 right-0" style="height: 1px; background: linear-gradient(90deg, rgba(124,58,237,0) 0%, rgba(167,139,250,0.9) 50%, rgba(124,58,237,0) 100%); border-top-left-radius: 9999px; border-top-right-radius: 9999px; opacity: 0.7; filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.35));"></div>
  
  <style class="">
    @keyframes glowSlideDown {
      0% {
        clip-path: inset(0 0 100% 0);
      }
      100% {
        clip-path: inset(0 0 0 0);
      }
    }
  </style>
</button>