Añadir al carrito Componente de botón
Un componente de botón receptivo "Agregar al carrito" diseñado con los principios de Material Design, con un esquema de color triádico y compatible con el modo oscuro. Diseñado para su uso en el cuadro de mandos, incluye un selector de cantidad e integra efectos de profundidad utilizando Tailwind CSS para sombras y animaciones.
Código HTML
<div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
<div class="flex flex-col md:flex-row items-center bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl space-y-4 md:space-y-0 md:space-x-6 w-full max-w-2xl transform transition-all duration-300 hover:shadow-2xl">
<div class="flex-shrink-0 w-32 h-32 md:w-48 md:h-48 rounded-lg overflow-hidden shadow-md dark:shadow-lg">
<img src="https://picsum.photos/seed/addtocart/400/400" alt="Product Image" class="w-full h-full object-cover">
</div>
<div class="flex-grow text-center md:text-left">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Awesome Product Name</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">A brief description of the amazing product that will enhance your life.</p>
<div class="flex items-center justify-center md:justify-start mb-4">
<span class="text-3xl font-extrabold text-indigo-600 dark:text-teal-400">$29.99</span>
<span class="text-lg text-gray-500 dark:text-gray-400 line-through ml-2">$39.99</span>
</div>
<div class="flex items-center justify-center md:justify-start space-x-3 mb-4">
<label for="quantity" class="text-gray-700 dark:text-gray-300 font-medium">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" value="1" class="w-20 p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-teal-400">
</div>
<button class="w-full md:w-auto px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md transition-all duration-300 hover:bg-indigo-700 dark:bg-teal-500 dark:hover:bg-teal-600 focus:outline-none focus:ring-4 focus:ring-indigo-500 dark:focus:ring-teal-400 focus:ring-opacity-50 transform hover:-translate-y-0.5 active:scale-95">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z" />
</svg>
Add to Cart
</button>
<div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
<p>Estimated delivery: <span class="font-bold">3-5 business days</span></p>
<p>In stock: <span class="font-bold text-green-500">Yes</span></p>
</div>
</div>
</div>
</div>Componentes relacionados
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.
Botón Añadir a la cesta
Un simple botón de agregar al carrito en tono tierra con efectos de desplazamiento inspirados en la microinteracción, con un diseño receptivo y compatibilidad con el modo oscuro.
Añadir al carrito Componente de botón
Un complejo botón Añadir al carrito diseñado con una estética retro/vintage y una combinación de colores complementaria, adecuado para un sitio web profesional de la empresa. Este componente es compatible con el modo oscuro y responde, utilizando Tailwind CSS para el estilo.