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 componente receptivo del botón Agregar al carrito diseñado en un estilo brutalista con colores vibrantes, adecuado para interfaces de redes sociales con soporte para temas oscuros.
Añadir al carrito Componente de botón
Un botón receptivo 'Agregar al carrito' con microinteracciones atractivas, tonos cálidos / atardeceres, adecuado para sitios web de alimentos / restaurantes, con una animación sutil al pasar el mouse / hacer clic y soporte para modo oscuro.