Botón Añadir a la cesta
Un componente receptivo del botón Agregar al carrito diseñado con elementos skeuomórficos, colores vibrantes y soporte para temas oscuros, adecuado para fines de blog y consumo de contenido.
Código HTML
<div class="flex flex-col items-center justify-center p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition duration-300">
<img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-32 rounded-lg shadow-md mb-4">
<h2 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2">Special Product</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">This is a great product for your reading material. Click the button below to add it to your cart!</p>
<button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold py-2 px-4 border rounded-lg hover:scale-105 transform transition duration-300 ease-in-out shadow-lg">
<span class="flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
Add to Cart
</span>
</button>
</div>Componentes relacionados
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.
Luxury_Retro_Add_to_Cart_Button
Un elegante componente de botón 'Agregar al carrito' (o 'Consultar ahora' para bienes raíces) con una sensación de lujo/premium y una paleta de colores retro/vintage. Diseñado para plataformas inmobiliarias, con diseño responsivo y soporte para modo oscuro.
Skeuomorphic Añadir al carrito Botón
Botón Skeuomórfico Agregar al carrito con colores vibrantes para un sitio web de portafolio, con un diseño complejo con elementos interactivos y soporte de modo oscuro receptivo usando Tailwind CSS.