Botón Añadir a la cesta

Un botón Skeuomórfico Agregar al carrito con efectos responsivos y soporte para temas oscuros.

Vista previa

Código HTML

<button
  class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-800 dark:text-gray-200 py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out"
>
  <span class="flex items-center justify-center">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-6 w-6 mr-2"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <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 2a2 2 0 11-4 0 2 2 0 014 0z"
      ></path>
    </svg>
    Add to Cart
  </span>
</button>

Componentes relacionados

Botón Añadir a la cesta

Un componente de botón Skeuomórfico 'Agregar al carrito' diseñado con Tailwind CSS, con efectos responsivos y soporte para temas oscuros.

Abrir

Botón Añadir a la cesta

Botón "Agregar al carrito" receptivo con diseño esqueuomórfico, combinación de colores monocromática y soporte para temas oscuros.

Abrir

Añadir al carrito Componente de botón

Un componente de botón 'Agregar al carrito' de estilo 3D diseñado para interfaces de redes sociales. Cuenta con una interfaz rica con profundidad, elementos de diseño atractivos y es responsivo con soporte para temas oscuros.

Abrir