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 reaktionsschnelle "In den Warenkorb"-Schaltflächenkomponente mit triadischen Farben, Mikrointeraktionsfokus und Unterstützung für den Dunkelmodus für E-Commerce-Anwendungen.

Vorschau

HTML-Code 

<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="group relative flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold
    bg-emerald-500 text-white
    hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700
    transition-all duration-300 ease-in-out
    overflow-hidden
    shadow-lg hover:shadow-xl
    dark:bg-emerald-600 dark:hover:bg-emerald-700">
    <span class="relative z-10 transition-transform duration-300 ease-in-out group-hover:-translate-x-full opacity-100 group-hover:opacity-0 whitespace-nowrap">
      Add to Cart
    </span>
    <span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
      transition-transform duration-300 ease-in-out
      text-purple-200 dark:text-purple-300
      bg-purple-600 dark:bg-purple-700
      rounded-full
      scale-y-0 group-hover:scale-y-100
      opacity-0 group-hover:opacity-100
      group-hover:px-6 group-hover:py-3">
      <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
      </svg>
      Added!
    </span>
    <span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
      transition-transform duration-300 ease-in-out delay-150
      text-orange-200 dark:text-orange-300
      bg-orange-500 dark:bg-orange-600
      rounded-full
      scale-y-0 group-hover:scale-y-100
      opacity-0 group-hover:opacity-100
      group-hover:px-6 group-hover:py-3
      hidden">
      <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.703.707 1.703H17m0-10a2 2 0 110 4 2 2 0 010-4zm-7 4a2 2 0 110 4 2 2 0 010-4z" />
      </svg>
      Adding...
    </span>
  </button>
</div>

Verwandte Komponenten

In den Warenkorb Button

In den Warenkorb Button-Komponente mit minimalistischem/flachem Design, Graustufen-Farbschema, komplexer Komplexitätsstufe, für Dashboard-Zwecke, mit responsivem Design und Unterstützung für dunkle Themen.

Offen

In den Warenkorb Button-Komponente - Memphis Graustufen Wetter

Eine komplexe "In den Warenkorb"-Schaltflächenkomponente mit Memphis-Design-Inspiration unter Verwendung eines Graustufen-Farbschemas, angepasst an ein Wetter-/Klimaprodukt. Zu den Funktionen gehören ein dynamisches Symbol, ein Ladestatus, eine Impulsanimation und eine Elementanzahl, die alle reaktionsschnell sind und den Dunkelmodus unterstützen. Diese Komponente ist als spielerischer und dennoch funktionaler Call-to-Action für Wetterdaten-Abonnements oder klimabezogene Produkte konzipiert.

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