CCHub Logo CCHub Tailwind Collection
Komponenten Tasten Buttons-Komponente

Buttons-Komponente

Eine einfache Schaltflächenkomponente, die mit Material Design gestaltet wurde, ein monochromatisches Farbschema verwendet und den Dunkelmodus unterstützt, geeignet für Geschäfts-/Unternehmenswebsites.

Vorschau

HTML-Code 

<div class="flex flex-col items-center space-y-4 p-6 bg-gray-100 dark:bg-gray-800">
    <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Buttons Component</h2>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Primary Button</button>
        <button class="px-6 py-2 rounded border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white dark:border-blue-800 dark:text-blue-200 dark:hover:bg-blue-800 dark:hover:text-white">Secondary Button</button>
    </div>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-gray-300 text-gray-800 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">Tertiary Button</button>
        <button class="px-6 py-2 rounded bg-transparent border border-gray-300 text-gray-800 hover:bg-gray-300 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700">Outlined Button</button>
    </div>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Large Button</button>
        <button class="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Medium Button</button>
        <button class="px-2 py-1 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Small Button</button>
    </div>
</div>

Verwandte Komponenten

Buttons-Komponente

Eine Schaltflächenkomponente im 3D-Stil, die für ein Portfolio mit einem analogen Farbschema und Unterstützung des Dunkelmodus geeignet ist.

Offen

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

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

Offen