<button class="flex overflow-hidden items-center text-sm font-medium bg-green-600 text-white shadow hover:bg-green-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-green-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="M12 2a1 1 0 0 1 1 1v10.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414L11 13.586V3a1 1 0 0 1 1-1zM5 17a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1z"></path>
    </svg>
    <span class="ml-1 text-white">Download App</span>
  </div>
  <div class="ml-2 flex items-center gap-1 text-sm">
    <span class="text-xs bg-green-500 px-1 rounded text-white">FREE</span>
  </div>
</button>