CCHub Logo CCHub Tailwind Collection
Komponenten Zurück zum Anfang Schaltfläche Zurück-nach-oben-Schaltfläche

Zurück-nach-oben-Schaltfläche

Eine Back-to-Top-Button-Komponente mit Mikrointeraktionen, Farbschema in Erdtönen, einfachem Layout für Geschäfts-/Unternehmenswebsites; Responsives Design mit Unterstützung des Dunkelmodus unter Verwendung von Tailwind CSS

Vorschau

HTML-Code 

<!-- Back to Top Button Component -->
<a href="#top" class="fixed bottom-6 right-6 flex items-center justify-center w-12 h-12 bg-emerald-700 text-white rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-500" aria-label="Back to Top">
  <span class="sr-only">Back to Top</span>
  <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/>
  </svg>
</a>

<!-- To enable smooth scrolling behavior across the page, add the `scroll-smooth` class to your `<html>` element: -->
<!-- <html class="scroll-smooth"> -->

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

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.

Offen

Zurück zum Anfang Schaltflächenkomponente

Eine reaktionsschnelle "Zurück zum Anfang"-Schaltfläche mit Material Design-Ästhetik, monochromatischem Farbschema und Unterstützung für den Dunkelmodus. Sie wird als schwebende Aktionsschaltfläche (FAB) in der unteren rechten Ecke angezeigt.

Offen