CCHub Logo CCHub Tailwind Collection
Komponenten Tasten Buttons-Komponente

Buttons-Komponente

Einfache, reaktionsschnelle Tastenkomponente mit einem von Papier/Druck inspirierten Graustufendesign, geeignet für Bildungsplattformen, die den Hell- und Dunkelmodus unterstützen.

Vorschau

HTML-Code 

<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-[200px] flex items-center justify-center font-sans">
  <div class="max-w-xl w-full mx-auto p-6 sm:p-8 md:p-10 bg-white dark:bg-gray-800 shadow-md rounded-lg border border-gray-200 dark:border-gray-700 leading-relaxed">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-tight leading-tight">
      Lesson Navigation
    </h2>
    <div class="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center">
      <button type="button" class="transition-all duration-300 ease-in-out
        flex-1 px-6 py-3 text-lg sm:text-xl font-semibold
        bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100
        border border-gray-300 dark:border-gray-600 rounded-md
        shadow-sm hover:shadow-md
        hover:bg-gray-50 dark:hover:bg-gray-600
        focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800
        active:bg-gray-100 dark:active:bg-gray-700/80
        whitespace-nowrap text-center
        relative group overflow-hidden">
        <span class="absolute inset-0 border-white dark:border-gray-800 border-2 rounded-md transform scale-105 group-hover:scale-100 transition-transform duration-300 ease-in-out opacity-0 group-hover:opacity-100"></span>
        Previous Lesson
      </button>
      <button type="button" class="transition-all duration-300 ease-in-out
        flex-1 px-6 py-3 text-lg sm:text-xl font-semibold
        bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-900
        border border-gray-800 dark:border-gray-100 rounded-md
        shadow-md hover:shadow-lg
        hover:bg-gray-700 dark:hover:bg-gray-200
        focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800
        active:bg-gray-900 dark:active:bg-gray-300
        whitespace-nowrap text-center
        relative group overflow-hidden">
        <span class="absolute inset-0 border-gray-800 dark:border-gray-100 border-2 rounded-md transform scale-105 group-hover:scale-100 transition-transform duration-300 ease-in-out opacity-0 group-hover:opacity-100"></span>
        Next Lesson
      </button>
    </div>
    <div class="mt-6 sm:mt-8 text-center">
      <a href="#" class="inline-flex items-center text-base sm:text-lg font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors duration-200">
        <svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
        View All Lessons
      </a>
    </div>
  </div>
</div>

Verwandte Komponenten

Verspielte Entertainment-Tasten

Ein Satz verspielter und lustiger Tasten, die für eine Unterhaltungs- oder Medienplattform entwickelt wurden, mit gedämpften/entsättigten Farben und abgerundeten Elementen. Reaktionsschnell und mit Unterstützung für den Dunkelmodus.

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

Buttons-Komponente

Eine minimalistische Schaltflächenkomponente, die für ein Portfolio entwickelt wurde, in dem Arbeiten oder Produkte vorgestellt werden, mit leuchtenden Farben und responsivem Design mit Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen