CCHub Logo CCHub Tailwind Collection
Komponenten Tasten Buttons-Komponente

Buttons-Komponente

Eine Schaltflächenkomponente im Retro-Vintage-Stil mit triadischem Farbschema, einfacher Komplexität und ansprechendem Design mit Unterstützung des Dunkelmodus, geeignet für einen Blog oder eine Content-Website.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">

  <!-- Retro Button 1 -->
  <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full m-2
                 transform transition duration-300 hover:scale-105
                 dark:bg-red-700 dark:hover:bg-red-900">
    Click Me (Red)
  </button>

  <!-- Retro Button 2 -->
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full m-2
                 transform transition duration-300 hover:scale-105
                 dark:bg-blue-700 dark:hover:bg-blue-900">
    Click Me (Blue)
  </button>

  <!-- Retro Button 3 -->
  <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded-full m-2
                 transform transition duration-300 hover:scale-105
                 dark:bg-yellow-700 dark:hover:bg-yellow-900">
    Click Me (Yellow)
  </button>

  <!-- Responsive Example: Buttons stack on small screens and are side-by-side on larger screens -->
  <div class="flex flex-col sm:flex-row mt-8">
    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded m-2
                   dark:bg-green-700 dark:hover:bg-green-900">
      Responsive Button 1
    </button>
    <button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded m-2
                   dark:bg-purple-700 dark:hover:bg-purple-900">
      Responsive Button 2
    </button>
  </div>

  <!-- Dark Mode Toggle Placeholder (for visual representation, no JS) -->
  <div class="mt-8 text-gray-700 dark:text-gray-300">
    Toggle your browser/OS dark mode to see changes.
  </div>

</div>

Verwandte Komponenten

Buttons-Komponente

Eine minimalistische/flache Design-Schaltflächenkomponente mit einem Graustufen-Farbschema. Es eignet sich für Business-/Unternehmenswebsites und hat eine moderate Komplexität mit einigen interaktiven Funktionen. Es ist reaktionsschnell und unterstützt dunkles Theme mit Tailwind CSS.

Offen

Buttons-Komponente

Eine Buttons-Komponente, die mit 3D-Elementen und leuchtenden Farben für Social-Media-Oberflächen entwickelt wurde und dunkles Design und responsives Design unterstützt.

Offen

Komponente "Brutalismus-Knöpfe"

Eine Schaltflächenkomponente mit einem brutalistischen Design mit Farben mit hoher Sättigung, responsivem Layout und Unterstützung für den Dunkelmodus, die für Geschäfts- und Unternehmenswebsites geeignet ist.

Offen