CCHub Logo CCHub Tailwind Collection
Komponenten In den Warenkorb Button Komponente der Schaltfläche "In den Warenkorb"

Komponente der Schaltfläche "In den Warenkorb"

Eine von der Natur inspirierte, pastellfarbene Schaltflächenkomponente "In den Warenkorb", die für Anwendungen im Gesundheitswesen/Medizin entwickelt wurde, mit fließenden Linien und responsivem Design mit Unterstützung des Dunkelmodus.

Vorschau

HTML-Code 

<div class="flex justify-center items-center p-4 bg-gradient-to-br from-fuchsia-50 to-purple-50 dark:from-purple-950 dark:via-fuchsia-950 dark:to-teal-950 min-h-screen">
  <button class="relative flex items-center justify-center py-3 px-8 text-lg font-semibold text-fuchsia-800 bg-gradient-to-r from-fuchsia-200 via-rose-100 to-purple-200 rounded-full shadow-lg overflow-hidden transition-all duration-300 ease-in-out
                   dark:from-fuchsia-800 dark:via-rose-700 dark:to-purple-800 dark:text-fuchsia-50 dark:shadow-xl dark:shadow-fuchsia-900/50
                   hover:scale-105 hover:shadow-xl hover:shadow-fuchsia-300/60 dark:hover:shadow-fuchsia-700/70
                   focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-700
                   active:scale-95">
    <span class="relative z-10 flex items-center space-x-2">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M16 16h.01"></path>
      </svg>
      <span>Add to Cart</span>
    </span>
    <div class="absolute inset-0 bg-gradient-to-r from-fuchsia-100 via-rose-50 to-purple-100 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100
                dark:from-fuchsia-700 dark:via-rose-600 dark:to-purple-700"></div>

    <!-- Nature-inspired flowing lines overlay -->
    <svg class="absolute inset-0 w-full h-full opacity-30 pointer-events-none transform scale-150 transition-transform duration-500 ease-in-out group-hover:scale-100
                dark:opacity-10 dark:text-fuchsia-300" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path d="M0 50 C 25 20, 75 80, 100 50 L 100 100 L 0 100 Z" fill="currentColor" class="text-fuchsia-300/50 dark:text-fuchsia-600/50"></path>
      <path d="M0 60 C 20 90, 80 10, 100 40 V 100 H 0 Z" fill="currentColor" class="text-purple-300/50 dark:text-purple-600/50"></path>
    </svg>
  </button>
</div>

Verwandte Komponenten

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.

Offen

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

Komponente der Schaltfläche "In den Warenkorb"

Eine reaktionsschnelle Schaltfläche "In den Warenkorb", die im dunklen Modus mit Tailwind CSS entworfen wurde, mit Hover-Effekten und Unterstützung für dunkle Themen.

Offen