CCHub Logo CCHub Tailwind Collection
Komponenten In den Warenkorb Button In den Warenkorb Button

In den Warenkorb Button

Ein Skeuomorphic Add to Cart-Button mit responsiven Effekten und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<button
  class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-800 dark:text-gray-200 py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out"
>
  <span class="flex items-center justify-center">
    <svg
      xmlns="http://www.w3.org/2000/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-.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"
      ></path>
    </svg>
    Add to Cart
  </span>
</button>

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

Vom Brutalismus inspirierte Schaltfläche "In den Warenkorb" mit leuchtenden Farben und Unterstützung für 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