Añadir al carrito Componente de botón

<div class="flex items-center justify-center p-4 bg-orange-50 dark:bg-gray-950 min-h-screen">
  <button class="relative group overflow-hidden px-8 py-3 rounded-lg shadow-md bg-gradient-to-br from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700
    text-white font-semibold uppercase tracking-wider text-base md:text-lg
    transition-all duration-300 ease-in-out
    focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800
    hover:shadow-lg hover:scale-105
    before:content-[''] before:absolute before:inset-0 before:bg-white before:opacity-0 before:blur-md
    group-hover:before:opacity-10 group-hover:before:animate-pulse">
    <span class="relative z-10 flex items-center justify-center gap-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform -rotate-12 group-hover:rotate-0 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
      </svg>
      Add to Cart
    </span>

    <!-- Paper Fold Detail (Pseudo-element-like via nested div for simplicity) -->
    <div class="absolute -bottom-2 -right-2 w-8 h-8 rounded-br-lg bg-red-600 dark:bg-red-800 group-hover:bg-red-700 dark:group-hover:bg-red-900 transition-colors duration-300 transform rotate-45 origin-bottom-right group-hover:scale-110">
      <div class="absolute inset-0 w-full h-full bg-orange-400 dark:bg-orange-600 opacity-30 transform -translate-x-1 -translate-y-1 rounded-br-lg"></div>
    </div>

    <!-- Subtle Grain/Texture Overlay (Pseudo-element-like via nested div) -->
    <div class="absolute inset-0 opacity-10 bg-repeat" style="background-image: url('data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000000" fill-opacity="0.1" fill-rule="evenodd"%3E%3Cpath d="M5 0h1L0 6V5zM6 5v1H0v-1z"/%3E%3C/g%3E%3C/svg%3E');"></div>
  </button>
</div>