<button class="flex overflow-hidden items-center text-sm font-medium bg-red-600 text-white shadow hover:bg-red-700 h-9 px-4 py-2 max-w-52 whitespace-pre group relative w-full justify-center gap-2 rounded-md transition-all duration-300 ease-out hover:ring-2 hover:ring-red-600 hover:ring-offset-2">
  <span class="absolute right-0 -mt-12 h-32 w-8 translate-x-12 rotate-12 bg-white opacity-15 transition-all duration-1000 ease-out group-hover:-translate-x-40"></span>
  <div class="flex items-center">
    <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
      <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"></path>
    </svg>
    <span class="ml-1 text-white">Subscribe</span>
  </div>
  <div class="ml-2 flex items-center gap-1 text-sm">
    <span class="inline-block tabular-nums tracking-wider font-display font-medium text-white">1.2M</span>
  </div>
</button>