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 komplexe "In den Warenkorb"-Button-Komponente für Anwendungen im Gesundheitswesen/Medizin, inspiriert von schweizerischer/internationaler Typografie und Erdtönen. Es zeichnet sich durch ein klares, minimalistisches Design mit Schwerpunkt auf Typografie und Rastersystemen aus und bietet volle Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.

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

Luxury_Retro_Add_to_Cart_Button

Eine elegante Schaltflächenkomponente "In den Warenkorb" (oder "Jetzt anfragen" für Immobilien) mit einem Luxus-/Premium-Gefühl und einer Retro-/Vintage-Farbpalette. Entwickelt für Immobilienplattformen, mit responsivem Design und Unterstützung für den Dunkelmodus.

Offen