Añadir al carrito Componente de botón
Un componente receptivo del botón Agregar al carrito diseñado en un estilo brutalista con colores vibrantes, adecuado para interfaces de redes sociales con soporte para temas oscuros.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-900 border border-red-600 dark:border-red-400 rounded-lg shadow-lg p-5 w-full max-w-md text-center">
<h2 class="text-2xl font-bold mb-3 text-red-600 dark:text-red-400">Add to Cart</h2>
<img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="w-full h-auto rounded-lg mb-4">
<p class="text-lg font-medium text-gray-800 dark:text-gray-200">Check out this amazing product that you will love!</p>
<div class="mt-5">
<button class="bg-blue-600 dark:bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-500 dark:hover:bg-blue-400 transition duration-300 ease-in-out">
Add to Cart
</button>
</div>
<div class="mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-600 dark:border-red-400">
</div>
</div>
</div>Componentes relacionados
Brutalismo Pastel Añadir al carrito Botón
Botón Agregar al carrito inspirado en el brutalismo con una combinación de colores pastel, complejidad moderada y diseño receptivo con soporte para modo oscuro. Adecuado para un blog o sitio web de contenido.
Industrial_AddToCartButton
Un componente de botón 'Agregar al carrito' de estilo industrial diseñado con tonos océano/azul para sitios web gubernamentales / de servicio público. Cuenta con elementos expuestos, estética utilitaria, capacidad de respuesta total y compatibilidad con modo oscuro.
Añadir al carrito Componente de botón
Un componente de botón "Agregar al carrito" de color caramelo inspirado en la naturaleza, diseñado para una plataforma de foro/comunidad, con un estilo fluido y orgánico. Es responsivo y admite el modo oscuro.