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

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

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

Offen

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.

Offen