Añadir al carrito Componente de botón

<div class="flex items-center justify-center p-4 bg-gradient-to-br from-purple-100 via-pink-100 to-green-100 dark:from-gray-900 dark:via-purple-950 dark:to-teal-950 min-h-screen">
  <button class="relative flex items-center justify-center
                 px-8 py-3
                 font-bold text-lg text-white
                 transition-all duration-300 ease-in-out
                 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-purple-700
                 group
                 overflow-hidden
                 bg-gradient-to-br from-pink-400 via-purple-400 to-green-400
                 dark:from-pink-700 dark:via-purple-700 dark:to-green-700
                 shadow-lg shadow-pink-300/50 dark:shadow-purple-700/50
                 rounded-full
                 transform hover:scale-105 active:scale-95
                 border-2 border-transparent hover:border-white dark:hover:border-gray-800">

    <span class="relative z-10 flex items-center gap-2">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z"></path>
      </svg>
      <span>Add to Cart</span>
    </span>

    <!-- Organic blob background for hover effect -->
    <div class="absolute inset-0 z-0 
                  bg-gradient-to-br from-white/20 via-white/5 to-white/20
                  dark:from-black/20 dark:via-black/5 dark:to-black/20 
                  transform 
                  scale-0 group-hover:scale-100 
                  transition-all duration-500 ease-out 
                  rounded-full 
                  blur-lg opacity-0 group-hover:opacity-100
                  bg-opacity-0 group-hover:bg-opacity-100
                  origin-center
                  "></div>

    <div class="absolute inset-0 z-0 
                  bg-gradient-to-br from-pink-300 via-purple-300 to-green-300
                  dark:from-pink-600 dark:via-purple-600 dark:to-green-600
                  transform 
                  scale-0 group-hover:scale-100 
                  transition-all duration-500 ease-out 
                  rounded-full 
                  blur-md opacity-0 group-hover:opacity-75
                  origin-center
                  " style="clip-path: ellipse(60% 60% at 50% 50%);"></div>

  </button>
</div>