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

In den Warenkorb Button

Eine Skeuomorphe "In den Warenkorb"-Button-Komponente, die mit Tailwind CSS entworfen wurde und reaktionsschnelle Effekte und Unterstützung für dunkle Designs bietet.

Offen

In den Warenkorb Button Komponente 46

Eine Retro-/Vintage-Schaltflächenkomponente "In den Warenkorb", die mit Tailwind CSS entworfen wurde, mit responsivem Design und Unterstützung für dunkle Themen.

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