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 "In den Warenkorb"-Button-Komponente im Retro-/Vintage-Stil für E-Commerce-Anwendungen. Dieser Button hat ein nostalgisches Design, das von den 80er und 90er Jahren inspiriert ist, mit einem analogen Farbschema und Effekten für Interaktivität. Es ist reaktionsschnell und unterstützt dunkle Themen.

Vorschau

HTML-Code 

<div class="flex flex-col items-center">
    <div class="bg-gradient-to-r from-purple-500 to-pink-500 p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 dark:from-purple-700 dark:to-pink-700">
        <img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-t-lg" />
        <div class="mt-2 flex flex-col items-center">
            <p class="text-white text-lg font-bold dark:text-gray-300">Cool Retro Product</p>
            <span class="text-yellow-200 dark:text-yellow-300">$19.99</span>
            <button class="mt-4 bg-yellow-400 text-white py-2 px-4 rounded-full transition duration-300 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700">
                <span class="flex items-center justify-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2" />
                    Add to Cart
                </span>
            </button>
        </div>
    </div>
</div>

Verwandte Komponenten

Retro Button "In den Warenkorb"

Responsive Schaltfläche "In den Warenkorb" mit Retro/Vintage-Design, komplementärem Farbschema und moderater Komplexität für einen Dashboard-Zweck. Unterstützt den Dunkelmodus.

Offen

In den Warenkorb Button

In den Warenkorb Button-Komponente mit minimalistischem/flachem Design, Graustufen-Farbschema, komplexer Komplexitätsstufe, für Dashboard-Zwecke, mit responsivem Design und Unterstützung für dunkle Themen.

Offen

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