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.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
<div class="flex flex-col items-center bg-gray-800 p-6 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/300" alt="Product Image" class="w-full h-auto rounded-lg mb-4" />
<h2 class="text-lg font-semibold mb-2">Product Name</h2>
<p class="text-gray-400 mb-4">Short description of the product goes here.</p>
<div class="flex items-center justify-between w-full">
<span class="text-xl font-bold">$19.99</span>
<button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
Add to Cart
</button>
</div>
</div>
</div>Componentes relacionados
Brutalismo Añadir al carrito Botón
Un componente de botón 'Agregar al carrito' simple y de estilo brutalista con alto contraste, colores complementarios y propósito para las redes sociales. Totalmente receptivo con soporte para modo oscuro.
Retro Añadir al carrito Botón
Botón responsivo 'Agregar al carrito' con diseño retro / vintage, combinación de colores complementaria y complejidad moderada para un propósito de tablero. Soporta el modo oscuro.
Añadir al carrito Componente de botón
Un componente de botón 'Agregar al carrito' receptivo con colores triádicos, enfoque de microinteracción y soporte de modo oscuro para aplicaciones de comercio electrónico.