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 Schaltflächenkomponente im 3D-Stil "In den Warenkorb", die für Social-Media-Schnittstellen entwickelt wurde. Es verfügt über eine reichhaltige Benutzeroberfläche mit Tiefe, ansprechenden Designelementen und ist reaktionsschnell mit Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="flex items-center justify-center p-4">
    <div class="relative group">
        <button class="relative z-10 block rounded-lg bg-blue-500 p-4 text-white text-lg font-semibold shadow-md transition-transform transform-gpu hover:scale-105 focus:outline-none dark:bg-blue-700">
            <span>Add to Cart</span>
            <span class="absolute top-0 left-0 w-full h-full bg-yellow-400 rounded-lg opacity-0 group-hover:opacity-40 transition-opacity duration-300"></span>
        </button>
        <div class="absolute -bottom-3 -right-3 w-12 h-12 rounded-full bg-red-500 shadow-lg flex items-center justify-center transform rotate-45 transition-transform duration-300 group-hover:scale-110">
            <img src="https://picsum.photos/40" alt="Product Image" class="rounded-full">
        </div>
        <div class="absolute -bottom-16 -left-16 w-10 h-10 rounded-full bg-green-500 shadow-lg">
            <img src="https://picsum.photos/30" alt="Decorative Element" class="rounded-full">
        </div>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-blue-500 { background-color: #3b82f6; }
        .bg-blue-700 { background-color: #1d4ed8; }
        .bg-yellow-400 { background-color: #f59e0b; }
        .bg-red-500 { background-color: #ef4444; }
        .bg-green-500 { background-color: #22c55e; }
        .text-white { color: #ffffff; }
    }
</style>

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 Komponente für die Schaltfläche "In den Warenkorb", die in einem skeuomorphen Stil gestaltet ist, mit leuchtenden Farben und Unterstützung für dunkle Themen, die für Social-Media-Schnittstellen geeignet ist.

Offen

Komponente der Schaltfläche "In den Warenkorb"

Eine komplexe "In den Warenkorb"-Button-Komponente für Anwendungen im Gesundheitswesen/Medizin, inspiriert von schweizerischer/internationaler Typografie und Erdtönen. Es zeichnet sich durch ein klares, minimalistisches Design mit Schwerpunkt auf Typografie und Rastersystemen aus und bietet volle Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.

Offen