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

Buttons-Komponente

Eine reaktionsschnelle Schaltflächenkomponente mit Unterstützung für den Dunkelmodus, die für den E-Commerce geeignet ist und ein einfaches triadisches Farbschema aufweist.

Offen

3D_Business_Buttons_Component

Ein responsives Set von Business-Schaltflächen im 3D-Stil mit einem warmen Sonnenuntergangs-Farbschema, das für Unternehmenswebsites geeignet ist. Enthält Unterstützung für den Dunkelmodus und interaktive Hover-Effekte.

Offen

Buttons-Komponente

Eine reaktionsschnelle Schaltflächenkomponente mit Unterstützung für den Dunkelmodus für Portfolios. Verfügt über ein minimalistisches, flaches Design in Graustufen mit moderater Komplexität.

Offen