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

Komponente der Schaltfläche "In den Warenkorb"

Eine reaktionsschnelle Komponente für den "In den Warenkorb"-Schaltfläche, die im brutalistischen Stil mit leuchtenden Farben gestaltet ist und sich für Social-Media-Schnittstellen mit Unterstützung für dunkle Themen eignet.

Offen

Skeuomorphic Schaltfläche "In den Warenkorb"

Skeuomorphic Add to Cart-Button mit leuchtenden Farben für eine Portfolio-Website, mit einem komplexen Design mit interaktiven Elementen und reaktionsschneller Dark-Mode-Unterstützung mit Tailwind CSS.

Offen