Animated Sparkle Glow CTA Button

<a href="#"
  class="group inline-flex items-center gap-3 transition-colors duration-300 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400/60 sm:w-auto text-white/90 bg-black w-full max-w-fit rounded-3xl pt-1 pr-1 pb-1 pl-1 relative"
  aria-label="Start Free" style="box-shadow: inset 0 1px 0 rgba(56, 189, 248, 0.4)">
  <!-- Blue glow (appears on hover) -->
  <span class="pointer-events-none absolute -inset-1 rounded-full opacity-0 blur-xl transition duration-500 group-hover:opacity-100" style="background: radial-gradient(60% 60% at 50% 50%, rgba(56,189,248,.55), rgba(56,189,248,0) 70%);" aria-hidden="true"></span>

  <!-- Inner glossy surface + sparkles -->
  <span class="isolate inline-flex items-center gap-3 bg-gradient-to-br from-blue-500/0 via-blue-500/10 to-blue-500/0 rounded-3xl pt-3 pr-6 pb-3 pl-6 relative">
      <!-- subtle inner gloss -->
      <span class="pointer-events-none absolute inset-0 rounded-[999px] opacity-70 [box-shadow:inset_0_1px_0_rgba(255,255,255,.08),inset_0_-6px_20px_rgba(0,0,0,.5)]" aria-hidden="true"></span>

  <!-- starfield container -->
  <span class="pointer-events-none absolute inset-0 overflow-hidden rounded-[999px]" aria-hidden="true">
        <!-- sparkle dots (CSS animated in sequence) -->
        <style>
          @keyframes sparkle {
            0%, 100% { opacity: 0; transform: scale(0); }
            50% { opacity: 1; transform: scale(1); }
          }
          .sparkle {
            position: absolute;
            width: 3px;
            height: 3px;
            background: white;
            border-radius: 50%;
            opacity: 0;
            animation: sparkle 3s ease-in-out infinite;
          }
          .group:hover .sparkle {
            animation: sparkle 2s ease-in-out infinite;
          }
        </style>
        <span class="sparkle left-4 top-2" style="animation-delay: 0s;"></span>
  <span class="sparkle left-10 top-6" style="animation-delay: 0.3s;"></span>
  <span class="sparkle left-20 top-3" style="animation-delay: 0.6s;"></span>
  <span class="sparkle left-28 top-7" style="animation-delay: 0.9s;"></span>
  <span class="sparkle right-8 top-4" style="animation-delay: 1.2s;"></span>
  <span class="sparkle right-16 top-8" style="animation-delay: 1.5s;"></span>
  </span>

  <!-- Label + icon -->
  <span class="relative z-10 font-medium tracking-[-0.01em]">Start Free</span>
  <svg class="relative z-10 h-4 w-4 transition-transform duration-300 group-hover:translate-x-0.5" viewBox="0 0 20 20"
    fill="currentColor" aria-hidden="true">
    <path
      d="M11.293 3.293a1 1 0 011.414 0l5.0 5.0a1 1 0 010 1.414l-5.0 5.0a1 1 0 01-1.414-1.414L14.586 11H2a1 1 0 110-2h12.586l-3.293-3.293a1 1 0 010-1.414z"
      class=""></path>
  </svg>
  </span>
</a>