Neon Gradient Hover CTA Button

<meta charset="UTF-8">
<title>Glitch Button</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
  /* custom glitch animation */
  @keyframes glitch_4011 {
    0% {
      clip-path: var(--move1);
      transform: translate(0px, -10px);
    }

    10% {
      clip-path: var(--move2);
      transform: translate(-10px, 10px);
    }

    20% {
      clip-path: var(--move3);
      transform: translate(10px, 0px);
    }

    30% {
      clip-path: var(--move4);
      transform: translate(-10px, 10px);
    }

    40% {
      clip-path: var(--move5);
      transform: translate(10px, -10px);
    }

    50% {
      clip-path: var(--move6);
      transform: translate(-10px, 10px);
    }

    60% {
      clip-path: var(--move1);
      transform: translate(10px, -10px);
    }

    70% {
      clip-path: var(--move3);
      transform: translate(-10px, 10px);
    }

    80% {
      clip-path: var(--move2);
      transform: translate(10px, -10px);
    }

    90% {
      clip-path: var(--move4);
      transform: translate(-10px, 10px);
    }

    100% {
      clip-path: var(--move1);
      transform: translate(0);
    }
  }

  /* base + pseudo element */
  .glitch-btn::after {
    --move1: inset(50% 50% 50% 50%);
    --move2: inset(31% 0 40% 0);
    --move3: inset(39% 0 15% 0);
    --move4: inset(45% 0 40% 0);
    --move5: inset(45% 0 6% 0);
    --move6: inset(14% 0 61% 0);
    clip-path: var(--move1);
    content: '';
    position: absolute;
    inset: 0;
    display: block;
  }

  .glitch-btn:hover::after {
    animation: glitch_4011 1s steps(2, end);
    text-shadow: -3px -3px 0px #7D39ED, 3px 3px 0px #E94BE8;
    border: 3px solid rgb(208, 203, 255);
  }
</style>



<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] v text-sm font-semibold text-white bg-transparent border-transparent border rounded-md pt-3 pr-12 pb-3 pl-12 relative" data-element-id="aura-emg80nek6">
    <!-- 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>
    Connect with us</button>