Añadir al carrito Componente de botón

<div class="flex justify-center items-center p-4 bg-gradient-to-br from-fuchsia-50 to-purple-50 dark:from-purple-950 dark:via-fuchsia-950 dark:to-teal-950 min-h-screen">
  <button class="relative flex items-center justify-center py-3 px-8 text-lg font-semibold text-fuchsia-800 bg-gradient-to-r from-fuchsia-200 via-rose-100 to-purple-200 rounded-full shadow-lg overflow-hidden transition-all duration-300 ease-in-out
                   dark:from-fuchsia-800 dark:via-rose-700 dark:to-purple-800 dark:text-fuchsia-50 dark:shadow-xl dark:shadow-fuchsia-900/50
                   hover:scale-105 hover:shadow-xl hover:shadow-fuchsia-300/60 dark:hover:shadow-fuchsia-700/70
                   focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-700
                   active:scale-95">
    <span class="relative z-10 flex items-center space-x-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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M16 16h.01"></path>
      </svg>
      <span>Add to Cart</span>
    </span>
    <div class="absolute inset-0 bg-gradient-to-r from-fuchsia-100 via-rose-50 to-purple-100 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100
                dark:from-fuchsia-700 dark:via-rose-600 dark:to-purple-700"></div>

    <!-- Nature-inspired flowing lines overlay -->
    <svg class="absolute inset-0 w-full h-full opacity-30 pointer-events-none transform scale-150 transition-transform duration-500 ease-in-out group-hover:scale-100
                dark:opacity-10 dark:text-fuchsia-300" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path d="M0 50 C 25 20, 75 80, 100 50 L 100 100 L 0 100 Z" fill="currentColor" class="text-fuchsia-300/50 dark:text-fuchsia-600/50"></path>
      <path d="M0 60 C 20 90, 80 10, 100 40 V 100 H 0 Z" fill="currentColor" class="text-purple-300/50 dark:text-purple-600/50"></path>
    </svg>
  </button>
</div>