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.

Vista previa

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

Botón Añadir a la cesta

Un botón Skeuomórfico Agregar al carrito con efectos responsivos y soporte para temas oscuros.

Abrir

Añadir al carrito Componente de botón

Un botón responsivo 'Agregar al carrito' diseñado en modo oscuro usando Tailwind CSS, con efectos de desplazamiento y soporte para temas oscuros.

Abrir

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.

Abrir