CCHub Logo CCHub Tailwind Collection
Komponenten In den Warenkorb Button In den Warenkorb Button

In den Warenkorb Button

Eine 3D-Design-Schaltflächenkomponente "In den Einkaufswagen" mit responsiven Effekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative group">
        <button class="relative px-6 py-2 font-bold text-white transition-transform duration-300 bg-blue-600 rounded-lg shadow-lg transform hover:scale-105 active:scale-95 dark:bg-blue-700">
            <span class="absolute top-0 left-0 w-full h-full rounded-lg bg-blue-500 opacity-60 transition-opacity duration-300 group-hover:opacity-100"></span>
            <span class="relative z-10">Add to Cart</span>
        </button>
        <div class="absolute right-0 -top-1 -mr-4 z-0 w-10 h-10 bg-blue-200 rounded-full shadow-lg transform scale-75 transition-all duration-300 group-hover:scale-100"></div>
    </div>
</div>

Verwandte Komponenten

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

Industrial_AddToCartButton

Eine Schaltflächenkomponente im Industriestil, die mit Ozean-/Blautönen für Websites von Behörden/öffentlichen Diensten entwickelt wurde. Verfügt über freiliegende Elemente, zweckmäßige Ästhetik, volle Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen

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.

Offen