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 Komponente für die Schaltfläche "In den Einkaufswagen" im 3D-Stil mit leuchtenden Farben, responsivem Design und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS.

Vorschau

HTML-Code 

<div class="flex justify-center items-center p-6">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 transform transition-transform hover:scale-105">
        <div class="flex justify-between items-center mb-4">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-16 h-16 rounded-full border-2 border-violet-600 shadow-lg">
            <div class="ml-4">
                <h2 class="text-lg font-bold text-violet-700 dark:text-violet-300">Product Name</h2>
                <p class="text-md text-gray-600 dark:text-gray-300">$49.99</p>
            </div>
        </div>
        <button class="w-full bg-violet-600 hover:bg-violet-700 dark:bg-violet-700 dark:hover:bg-violet-600 text-white font-bold py-2 px-4 rounded-lg shadow-2xl transform hover:translate-y-1 transition-all duration-200 ease-in-out">
            Add to Cart
        </button>
    </div>
</div>

Verwandte Komponenten

Schaltfläche "In den Warenkorb"

Ein einfacher, erdfarbener "In den Warenkorb"-Button mit von Mikrointeraktion inspirierten Hover-Effekten, responsivem Design und Unterstützung für den Dunkelmodus.

Offen

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.

Offen

Organic_Nature_Add_To_Cart_Button

Eine von der Natur inspirierte "In den Warenkorb"-Button-Komponente mit komplementärem Farbschema, die sich für Bildungsplattformen eignet. Mit fließenden Linien, subtilen interaktiven Elementen, voller Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen