Animated Sparkle CTA Button Set (Tailwind)

<div class="flex flex-col sm:flex-row mt-7 gap-x-3 gap-y-3">
  <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 text-white/90 bg-black rounded-3xl pt-1 pr-1 pb-1 pl-1 relative"
    aria-label="Start Free">
    <!-- 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-white/10 to-white/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) -->
        <span class="sparkle left-4 top-2"></span>
    <span class="sparkle left-10 top-6 [animation-delay:.2s]"></span>
    <span class="sparkle left-20 top-3 [animation-delay:.4s]"></span>
    <span class="sparkle left-28 top-7 [animation-delay:.1s]"></span>
    <span class="sparkle right-8 top-4 [animation-delay:.5s]"></span>
    <span class="sparkle right-16 top-8 [animation-delay:.3s]"></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>
  <a href="#"
    class="inline-flex items-center justify-center gap-2 hover:bg-white/10 transition text-sm font-medium text-white/90 bg-white/5 rounded-3xl pt-0 pr-8 pb-0 pl-8 right-8 left-8 backdrop-blur-md"
    style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); --border-radius-before: 24px">

    Book a demo
  </a>
</div>