<button class="flex overflow-hidden items-center text-sm font-medium bg-teal-600 text-white shadow hover:bg-teal-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-teal-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="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z"></path>
    </svg>
    <span class="ml-1 text-white">Share</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">89</span>
  </div>
</button>