Componentes Botón Añadir a la cesta Añadir al carrito Componente de botón

Añadir al carrito Componente de botón

Agregar al carrito Botón diseñado para la interfaz de usuario del modo oscuro con tonos tierra, combinación de colores y nivel de complejidad complejo, para fines de cartera. El componente es responsivo y admite el tema oscuro utilizando el prefijo dark: de Tailwind.

Vista previa

Código HTML

<button class="bg-stone-700 hover:bg-stone-600 text-stone-100 py-3 px-6 rounded-lg font-semibold text-lg shadow-lg transition duration-300 ease-in-out dark:bg-stone-800 dark:hover:bg-stone-700 dark:text-stone-200 dark:shadow-xl"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-4-4H8a4 4 0 00-4 4v4m11 0l-3 4m0 0h3v3zm-3-4v1m10-4v2a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h10a2 2 0 012 2z" /> </svg> Add to Cart </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

Añadir al carrito Componente de botón

Un componente de botón Agregar al carrito inspirado en el brutalismo con Tailwind CSS, con alto contraste, diseños inusuales, efectos responsivos y soporte para temas oscuros.

Abrir

Añadir al carrito Componente de botón

Un complejo botón Añadir al carrito diseñado con una estética retro/vintage y una combinación de colores complementaria, adecuado para un sitio web profesional de la empresa. Este componente es compatible con el modo oscuro y responde, utilizando Tailwind CSS para el estilo.

Abrir