Añadir al carrito Componente de botón
Un componente de botón 'Agregar al carrito' de estilo retro / vintage para aplicaciones de comercio electrónico. Este botón tiene un diseño nostálgico inspirado en los años 80 y 90, utilizando una combinación de colores análoga y con efectos de interactividad. Es responsivo y admite temas oscuros.
Código HTML
<div class="flex flex-col items-center">
<div class="bg-gradient-to-r from-purple-500 to-pink-500 p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 dark:from-purple-700 dark:to-pink-700">
<img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-t-lg" />
<div class="mt-2 flex flex-col items-center">
<p class="text-white text-lg font-bold dark:text-gray-300">Cool Retro Product</p>
<span class="text-yellow-200 dark:text-yellow-300">$19.99</span>
<button class="mt-4 bg-yellow-400 text-white py-2 px-4 rounded-full transition duration-300 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700">
<span class="flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2" />
Add to Cart
</span>
</button>
</div>
</div>
</div>Componentes relacionados
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.
Añadir al carrito Componente de botón
Un complejo componente de botón "añadir al carrito" para aplicaciones sanitarias/médicas, inspirado en la tipografía suiza/internacional y en los tonos tierra. Cuenta con un diseño limpio y minimalista con un enfoque en la tipografía y los sistemas de cuadrícula, ofreciendo una capacidad de respuesta total y compatibilidad con el modo oscuro.
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.