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.
Código HTML
<div class="flex flex-col items-center justify-center space-y-4 p-4 bg-white dark:bg-gray-800 border-2 border-black dark:border-white rounded-lg shadow-md">
<img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-lg">
<div class="flex flex-col items-center text-center">
<h2 class="text-lg font-bold text-black dark:text-white">Product Name</h2>
<p class="text-sm text-gray-700 dark:text-gray-300">This is a brief description of the product that gives the user an idea of what they're adding to their cart.</p>
<button class="mt-4 px-6 py-3 bg-yellow-500 text-white font-bold text-sm uppercase rounded-md transition-all duration-300 transform hover:bg-yellow-600 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50 dark:bg-yellow-400 dark:text-black dark:hover:bg-yellow-500">
Add to Cart
</button>
</div>
</div>Componentes relacionados
Botón Añadir a la cesta
Un componente receptivo del botón Agregar al carrito diseñado en un estilo esqueuomórfico, con colores vibrantes y soporte para temas oscuros, adecuado para interfaces de redes sociales.
Añadir al carrito Componente de botón
Un botón responsivo 'Agregar al carrito' diseñado en modo oscuro usando Tailwind CSS, con efectos de desplazamiento y soporte para temas oscuros.
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.