CCHub Logo CCHub Tailwind Collection
Komponenten Tasten Buttons-Komponente

Buttons-Komponente

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

Vorschau

HTML-Code 

<div class="flex flex-wrap space-x-4 justify-center p-6">
    <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
        Primary Button
    </button>
    <button class="bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
        Secondary Button
    </button>
    <button class="bg-green-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
        Success Button
    </button>
    <button class="bg-red-500 text-white font-semibold py-2 px-4 rounded shadow-md hover:shadow-lg transition duration-200 ease-in-out transform hover:scale-105">
        Danger Button
    </button>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-blue-500 { background-color: #2563eb; }
        .bg-gray-300 { background-color: #4b5563; }
        .bg-green-500 { background-color: #22c55e; }
        .bg-red-500 { background-color: #ef4444; }
        .text-white { color: #ffffff; }
        .text-gray-800 { color: #f9fafb; }
        .shadow-md { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
    }
</style>

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

Skeuomorphism Analogous Complex Dashboard Buttons Component mit responsivem Design und Unterstützung für dunkle Themen.

Offen

3D_Healthcare_Buttons_Component

Eine komplexe, von 3D inspirierte Schaltflächenkomponente für Anwendungen im Gesundheitswesen mit einem monochromen Schwarz-Weiß-Design mit heller Akzentfarbe, reaktionsschnellem Layout und Unterstützung des Dunkelmodus.

Offen