CCHub Logo CCHub Tailwind Collection
Komponenten In den Warenkorb Button Komponente der Schaltfläche "In den Warenkorb"

Komponente der Schaltfläche "In den Warenkorb"

Eine vom Brutalismus inspirierte Add-to-Cart-Button-Komponente mit Tailwind CSS mit hohem Kontrast, ungewöhnlichen Layouts, responsiven Effekten und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center space-y-4 p-4 bg-white dark:bg-gray-800 border-2 border-black dark:border-white rounded-lg shadow-md">
    <img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-lg">
    <div class="flex flex-col items-center text-center">
        <h2 class="text-lg font-bold text-black dark:text-white">Product Name</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300">This is a brief description of the product that gives the user an idea of what they're adding to their cart.</p>
        <button class="mt-4 px-6 py-3 bg-yellow-500 text-white font-bold text-sm uppercase rounded-md transition-all duration-300 transform hover:bg-yellow-600 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50 dark:bg-yellow-400 dark:text-black dark:hover:bg-yellow-500">
            Add to Cart
        </button>
    </div>
</div>

Verwandte Komponenten

Glassmorphism In den Warenkorb Button

In den Warenkorb Schaltfläche mit Glasmorphismus-Stil, monochromatischem Farbschema und mittlerer Komplexität. Reaktionsschnell mit Unterstützung für den Dunkelmodus.

Offen

In den Warenkorb Button

Eine reaktionsschnelle Schaltfläche "In den Einkaufswagen", die nach Material Design-Prinzipien unter Verwendung von Tailwind CSS gestaltet ist und Designs im Dunkelmodus unterstützt.

Offen

Komponente der Schaltfläche "In den Warenkorb"

Eine reaktionsschnelle "In den Warenkorb"-Schaltflächenkomponente, die nach den Prinzipien des Material Designs gestaltet ist, ein triadisches Farbschema aufweist und den Dunkelmodus unterstützt. Es wurde für die Verwendung im Dashboard entwickelt, enthält einen Mengenwähler und integriert Tiefeneffekte mit Tailwind CSS für Schatten und Animationen.

Offen