In den Warenkorb Button

Komponente der Schaltfläche "In den Warenkorb"

Ein komplexer "In den Warenkorb"-Button mit Retro-/Vintage-Ästhetik und komplementärem Farbschema, der sich für eine professionelle Unternehmenswebsite eignet. Diese Komponente unterstützt den Dunkelmodus und ist reaktionsschnell, wobei Tailwind CSS für das Styling verwendet wird.

Vorschau öffnen

                <div class="flex items-center justify-center p-5 bg-gradient-to-r from-pink-500 to-yellow-500 rounded-lg transition duration-300 ease-in-out hover:scale-105 dark:from-pink-800 dark:to-yellow-700">  <img src="https://picsum.photos/40/40" alt="Product Image" class="rounded">  <div class="ml-4">    <h2 class="text-lg font-bold text-gray-900 dark:text-gray-100">Product Title</h2>    <p class="text-sm text-gray-700 dark:text-gray-300">This is a brief description of the product.</p>  </div>  <button class="ml-auto bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Add to Cart</button>  <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="ml-4 h-10 w-10 rounded-full border-2 border-blue-500 dark:border-blue-700"> </div>

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.

Vorschau öffnen

                <button class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg border border-gray-200 border-opacity-10 text-gray-800 px-6 py-3 rounded-md font-semibold transition duration-300 ease-in-out hover:bg-opacity-20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-20 dark:text-white dark:hover:bg-opacity-40 dark:focus:ring-gray-700 dark:focus:ring-opacity-50"> Add to Cart </button>

Vom Brutalismus inspirierte Schaltfläche "In den Warenkorb" mit leuchtenden Farben und Unterstützung für den Dunkelmodus.

Vorschau öffnen

                <button class="bg-red-600 dark:bg-purple-600 text-white dark:text-black font-bold py-2 px-4 rounded border-4 border-black dark:border-white hover:bg-red-700 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white transition duration-300 ease-in-out">
  Add to Cart
</button>

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.

Vorschau öffnen

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-900 border border-red-600 dark:border-red-400 rounded-lg shadow-lg p-5 w-full max-w-md text-center">
        <h2 class="text-2xl font-bold mb-3 text-red-600 dark:text-red-400">Add to Cart</h2>
        <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="w-full h-auto rounded-lg mb-4">
        <p class="text-lg font-medium text-gray-800 dark:text-gray-200">Check out this amazing product that you will love!</p>
        <div class="mt-5">
            <button class="bg-blue-600 dark:bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-500 dark:hover:bg-blue-400 transition duration-300 ease-in-out">
                Add to Cart
            </button>
        </div>
        <div class="mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-600 dark:border-red-400"> 
        </div>
    </div>
</div>

In den Warenkorb Button

Responsive Schaltfläche "In den Warenkorb" mit skeuomorphem Design, monochromatischem Farbschema und Unterstützung für dunkle Themen.

Vorschau öffnen

                <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold py-2 px-4 rounded-full shadow-lg dark:shadow-xl hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 ease-in-out hover:scale-105">
  Add to Cart
</button>

Brutalismus Pastell In den Warenkorb Button

Vom Brutalismus inspirierte Schaltfläche "In den Einkaufswagen" mit pastellfarbenem Farbschema, moderater Komplexität und responsivem Design mit Unterstützung des Dunkelmodus. Geeignet für einen Blog oder eine Content-Website.

Vorschau öffnen

                <button class="bg-pink-300 dark:bg-purple-700 text-gray-900 dark:text-gray-100 font-bold py-3 px-6 rounded-none border-4 border-black dark:border-white hover:bg-yellow-300 dark:hover:bg-yellow-600 hover:text-black dark:hover:text-white transition duration-300 ease-in-out shadow-lg dark:shadow-xl text-xl md:text-2xl">Add to Cart</button>

Komponente der Schaltfläche "In den Warenkorb"

In den Warenkorb Die Schaltfläche wurde für die Benutzeroberfläche im Dunkelmodus mit Erdtönen, Farbschema und komplexer Komplexität für Portfoliozwecke entwickelt. Die Komponente reagiert und unterstützt das dunkle Design mit dem Präfix dark: von Tailwind.

Vorschau öffnen

                <button class="bg-stone-700 hover:bg-stone-600 text-stone-100 py-3 px-6 rounded-lg font-semibold text-lg shadow-lg transition duration-300 ease-in-out dark:bg-stone-800 dark:hover:bg-stone-700 dark:text-stone-200 dark:shadow-xl"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-4-4H8a4 4 0 00-4 4v4m11 0l-3 4m0 0h3v3zm-3-4v1m10-4v2a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h10a2 2 0 012 2z" /> </svg> Add to Cart </button>

Retro Button "In den Warenkorb"

Responsive Schaltfläche "In den Warenkorb" mit Retro/Vintage-Design, komplementärem Farbschema und moderater Komplexität für einen Dashboard-Zweck. Unterstützt den Dunkelmodus.

Vorschau öffnen

                <button class="add-to-cart-button bg-teal-500 text-white py-2 px-4 rounded-lg border-2 border-pink-600 font-bold uppercase text-lg tracking-wider shadow-lg transform transition duration-300 hover:scale-105 hover:bg-teal-600 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-opacity-50 dark:bg-teal-700 dark:border-pink-400 dark:hover:bg-teal-800 dark:focus:ring-pink-400">
  Add to Cart
</button>

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 öffnen

                <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>

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 öffnen

                <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>

Kategorien

In den Warenkorb Button