Añadir al carrito Componente de botón
Un componente de botón 'Agregar al carrito' receptivo con colores triádicos, enfoque de microinteracción y soporte de modo oscuro para aplicaciones de comercio electrónico.
Código HTML
<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
<button class="group relative flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold
bg-emerald-500 text-white
hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700
transition-all duration-300 ease-in-out
overflow-hidden
shadow-lg hover:shadow-xl
dark:bg-emerald-600 dark:hover:bg-emerald-700">
<span class="relative z-10 transition-transform duration-300 ease-in-out group-hover:-translate-x-full opacity-100 group-hover:opacity-0 whitespace-nowrap">
Add to Cart
</span>
<span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
transition-transform duration-300 ease-in-out
text-purple-200 dark:text-purple-300
bg-purple-600 dark:bg-purple-700
rounded-full
scale-y-0 group-hover:scale-y-100
opacity-0 group-hover:opacity-100
group-hover:px-6 group-hover:py-3">
<svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Added!
</span>
<span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
transition-transform duration-300 ease-in-out delay-150
text-orange-200 dark:text-orange-300
bg-orange-500 dark:bg-orange-600
rounded-full
scale-y-0 group-hover:scale-y-100
opacity-0 group-hover:opacity-100
group-hover:px-6 group-hover:py-3
hidden">
<svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.703.707 1.703H17m0-10a2 2 0 110 4 2 2 0 010-4zm-7 4a2 2 0 110 4 2 2 0 010-4z" />
</svg>
Adding...
</span>
</button>
</div>Componentes relacionados
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.
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.
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.