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

Neumorphic Buttons-Komponente

Eine Schaltflächenkomponente mit einem neumorphen Designstil mit responsiven Effekten und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS.

Offen

Buttons-Komponente

Neumorphism Buttons-Komponente mit monochromatischem Farbschema für Portfolio-Zwecke, reaktionsschnell mit Unterstützung für dunkle Themen.

Offen

Buttons-Komponente

Material Design-gestaltete Schaltflächen mit einem Graustufen-Farbschema für Portfoliozwecke, mit responsivem Design und Unterstützung für dunkle Themen.

Offen