Botón Añadir a la cesta
Un botón responsivo Agregar al carrito diseñado con los principios de Material Design usando Tailwind CSS, compatible con temas de modo oscuro.
Código HTML
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 transition-colors duration-300">
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg px-5 py-4 transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/200" alt="Product Image" class="w-full h-40 object-cover rounded-md mb-4">
<h2 class="text-lg font-semibold dark:text-white">Product Name</h2>
<p class="text-gray-700 dark:text-gray-300 mb-4">This is a brief description of the product.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold dark:text-white">$19.99</span>
<button class="bg-blue-600 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-600">
Add to Cart
</button>
</div>
</div>
</div>Componentes relacionados
Añadir al carrito Componente de botón - Memphis Grayscale Weather
Un complejo componente de botón "Agregar al carrito" con inspiración en el diseño de Memphis utilizando un esquema de color en escala de grises, adaptado para un producto meteorológico/climático. Las características incluyen un icono dinámico, un estado de carga, una animación de pulso y un recuento de elementos, todo ello responsivo y con soporte para el modo oscuro. Este componente está diseñado como una llamada a la acción lúdica pero funcional para suscripciones de datos meteorológicos o productos relacionados con el clima.
Glassmorphism Añadir al carrito Botón
Agregar al carrito Botón con estilo de cristal, combinación de colores monocromática y complejidad moderada. Responsivo con soporte para el modo oscuro.
Añadir a la cesta Botón Componente 46
Un componente de botón 'Agregar al carrito' retro / vintage diseñado con Tailwind CSS, con diseño receptivo y soporte para temas oscuros.