CCHub Logo CCHub Tailwind Collection
Komponenten Tasten Glassmorphism Buttons-Komponente

Glassmorphism Buttons-Komponente

Eine einfache, reaktionsschnelle Glassmorphism-Schaltflächenkomponente mit Pastellfarben und Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.

Vorschau

HTML-Code 

<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex space-x-4">
    <button class="px-6 py-3 text-lg font-semibold text-white bg-pink-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-pink-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
      Button 1
    </button>
    <button class="px-6 py-3 text-lg font-semibold text-white bg-blue-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-blue-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
      Button 2
    </button>
  </div>
</div>

Verwandte Komponenten

Retro_Rainbow_Buttons_Component

Eine Sammlung von Regenbogen-Gradienten-Tasten im Retro-Stil, die für Fotogalerien und Portfolios entwickelt wurden, mit moderater Komplexität und voller Reaktionsfähigkeit sowie Unterstützung für den Dunkelmodus.

Offen

Buttons-Komponente

Eine minimalistische Schaltflächenkomponente, die mit Tailwind CSS entwickelt wurde, mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Buttons-Komponente

Eine Kollektion von minimalistischen und flachen Design-Knöpfen für verschiedene Aktionen mit einem komplementären Farbschema. Vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.

Offen