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

Zurück zum Anfang Schaltflächenkomponente

Eine reaktionsschnelle, optisch ansprechende Schaltfläche "Zurück zum Anfang" mit einem triadischen Farbschema, Farbverlauf und sanften Übergängen, die für eine Portfolio-Website geeignet ist, einschließlich Unterstützung des Dunkelmodus.

Vorschau

HTML-Code 

<div class="fixed bottom-6 right-6 z-50">
  <!-- The button is initially hidden and would be revealed by JS on scroll -->
  <!-- For demonstration, it's always visible here. In a real app, add a 'hidden' class by default -->
  <button aria-label="Scroll to top" class="group flex h-14 w-14 items-center justify-center rounded-full shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
    bg-gradient-to-br from-emerald-400 via-teal-500 to-blue-600
    dark:from-emerald-600 dark:via-teal-700 dark:to-blue-800">
    <svg class="h-8 w-8 text-white transition-transform duration-300 ease-in-out group-hover:-translate-y-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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
  </button>
</div>

Verwandte Komponenten

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

Zurück zum Anfang Schaltflächenkomponente

Ein einfacher Back-to-Top-Button, der in einem brutalistischen Stil mit Tailwind CSS gestaltet ist und sich für eine Portfolio-Website eignet. Es verfügt über ein Graustufen-Farbschema und Unterstützung für dunkle Themen.

Offen

Zurück zum Anfang Schaltfläche

Eine minimalistische und reaktionsschnelle "Zurück zum Anfang"-Schaltflächenkomponente mit Unterstützung für den Dunkelmodus. Es wird nach dem Scrollen nach unten angezeigt und verwendet ein sanftes Scrollen, um den Benutzer beim Klicken an den Anfang der Seite zurückzubringen. Für das Scrollen wird kein JavaScript verwendet, sondern nur CSS.

Offen