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.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative group">
<button class="relative px-6 py-2 font-bold text-white transition-transform duration-300 bg-blue-600 rounded-lg shadow-lg transform hover:scale-105 active:scale-95 dark:bg-blue-700">
<span class="absolute top-0 left-0 w-full h-full rounded-lg bg-blue-500 opacity-60 transition-opacity duration-300 group-hover:opacity-100"></span>
<span class="relative z-10">Add to Cart</span>
</button>
<div class="absolute right-0 -top-1 -mr-4 z-0 w-10 h-10 bg-blue-200 rounded-full shadow-lg transform scale-75 transition-all duration-300 group-hover:scale-100"></div>
</div>
</div>
Componentes relacionados
Añadir al carrito Componente de botón - Memphis Grayscale Weather
Un complejo componente de botón "Agregar al carrito" con inspiración en el diseño de Memphis utilizando un esquema de color en escala de grises, adaptado para un producto meteorológico/climático. Las características incluyen un icono dinámico, un estado de carga, una animación de pulso y un recuento de elementos, todo ello responsivo y con soporte para el modo oscuro. Este componente está diseñado como una llamada a la acción lúdica pero funcional para suscripciones de datos meteorológicos o productos relacionados con el clima.
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.
Botón Añadir a la cesta
Agregar al carrito Componente de botón con diseño minimalista / plano, combinación de colores en escala de grises, nivel de complejidad complejo, para fines de tablero, con diseño receptivo y soporte de tema oscuro.