CCHub Logo CCHub Tailwind Collection
Komponenten Zurück zum Anfang Schaltfläche Zurück zum Anfang Schaltflächenkomponente

Zurück zum Anfang Schaltflächenkomponente

Ein responsiver "Zurück zum Anfang"-Button, der den Prinzipien von Material Design folgt und den Dunkelmodus mit Tailwind CSS für Styling und reaktionsschnelle Effekte unterstützt.

Vorschau

HTML-Code 

<div class="fixed bottom-5 right-5 z-50">
    <button class="bg-blue-500 text-white rounded-full p-2 shadow-lg transition-transform transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:shadow-md dark:focus:ring-blue-300">
        <svg class="w-6 h-6" 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="M12 4v16m0 0L8 16m4 4l4-4" />
        </svg>
    </button>
</div>

<style>
  /* Tailwind dark mode support */
  @media (prefers-color-scheme: dark) {
      .bg-blue-500 { background-color: #3b82f6; }
      .bg-blue-700 { background-color: #2563eb; }
      .text-white { color: #ffffff; }
      .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
      .dark .shadow-md { box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); }
  }
</style>

Verwandte Komponenten

Zurück zum Anfang Schaltflächenkomponente

Eine reaktionsschnelle Back to Top Button-Komponente mit Glassmorphism-Design, Farbschema in Erdtönen und komplexen Interaktionen, die für ein Dashboard geeignet ist.

Offen

Brutalistisch Zurück zum Anfang

Eine brutalistische Back-to-Top-Button-Komponente mit Graustufenfarben und Tailwind CSS. Es ist reaktionsschnell und unterstützt den Dunkelmodus.

Offen

Brutalismus Zurück zum Anfang Schaltfläche

Zurück zum Anfang Button-Komponente im Brutalismus-Stil, triadischem Farbschema und komplexer Komplexität. Responsives Design mit Unterstützung für dunkle Themen. Kein JavaScript.

Offen