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
Botón Añadir a la cesta
Un componente de botón Agregar al carrito de diseño 3D con efectos responsivos y soporte de tema oscuro usando Tailwind CSS.
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 inspirado en el brutalismo con Tailwind CSS, con alto contraste, diseños inusuales, efectos responsivos y soporte para temas oscuros.