CCHub Logo CCHub Tailwind Collection
Komponenten In den Warenkorb Button In den Warenkorb Glassmorphism Erdtöne Button

In den Warenkorb Glassmorphism Erdtöne Button

Ein einfacher "In den Warenkorb"-Button, der im Glasmorphismus-Stil mit Erdtönen gestaltet ist und sich für eine Anwendung zum Thema Wetter/Klima eignet. Es reagiert vollständig und unterstützt den Dunkelmodus.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <button class="relative overflow-hidden w-64 h-16 rounded-full shadow-lg backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 border border-t-white border-l-white border-opacity-30 
                 dark:bg-gray-800 dark:bg-opacity-20 dark:border-white dark:border-opacity-10 
                 group transition-all duration-300 ease-in-out 
                 hover:shadow-xl hover:bg-opacity-30 hover:border-opacity-40 
                 dark:hover:bg-opacity-30 dark:hover:border-opacity-20">
    
    <span class="absolute inset-0 bg-gradient-to-br from-green-700 to-green-900 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out rounded-full"></span>
    
    <span class="relative z-10 flex items-center justify-center text-lg font-semibold text-gray-800 dark:text-gray-200 transition-colors duration-300 ease-in-out group-hover:text-white">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
      </svg>
      Add to Cart
    </span>
  </button>
</div>

Verwandte Komponenten

Komponente der Schaltfläche "In den Warenkorb"

Eine von der Natur inspirierte, bonbonfarbene "In den Warenkorb"-Button-Komponente, die für ein Forum/eine Community-Plattform entwickelt wurde und einen fließenden, organischen Stil aufweist. Es ist reaktionsschnell und unterstützt den Dunkelmodus.

Offen

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

Eine reaktionsschnelle Schaltfläche "In den Einkaufswagen", die nach Material Design-Prinzipien unter Verwendung von Tailwind CSS gestaltet ist und Designs im Dunkelmodus unterstützt.

Offen