Añadir al carrito Componente de botón
Un componente de botón Agregar al carrito de estilo 3D con colores vibrantes, diseño receptivo y soporte de tema oscuro usando Tailwind CSS.
Código HTML
<div class="flex justify-center items-center p-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 transform transition-transform hover:scale-105">
<div class="flex justify-between items-center mb-4">
<img src="https://picsum.photos/50" alt="Product Image" class="w-16 h-16 rounded-full border-2 border-violet-600 shadow-lg">
<div class="ml-4">
<h2 class="text-lg font-bold text-violet-700 dark:text-violet-300">Product Name</h2>
<p class="text-md text-gray-600 dark:text-gray-300">$49.99</p>
</div>
</div>
<button class="w-full bg-violet-600 hover:bg-violet-700 dark:bg-violet-700 dark:hover:bg-violet-600 text-white font-bold py-2 px-4 rounded-lg shadow-2xl transform hover:translate-y-1 transition-all duration-200 ease-in-out">
Add to Cart
</button>
</div>
</div>Componentes relacionados
Organic_Nature_Add_To_Cart_Button
Un componente de botón 'Agregar al carrito' inspirado en lo orgánico / naturaleza con un esquema de color complementario, adecuado para plataformas educativas. Cuenta con líneas fluidas, elementos interactivos sutiles, capacidad de respuesta total y compatibilidad con el modo oscuro.
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.
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.