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 "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.

Vorschau

HTML-Code 

<div class="fixed bottom-4 right-4 z-50">
  <button aria-label="Scroll to top" class="dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 dark:shadow-lg focus:outline-none dark:focus:ring-gray-500 rounded-full bg-gray-800 p-3 text-white shadow-md transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 active:scale-95 md:p-4 lg:p-5">
    <svg class="h-6 w-6 md:h-7 md:w-7 lg:h-8 lg:w-8" 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

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

Zurück zum Anfang Schaltfläche

Schaltfläche "Zurück zum Anfang" mit neumorphem Design, monochromatischem Farbschema und Unterstützung für den Dunkelmodus. Verwendet Tailwind CSS.

Offen

Brutalism_Earth_Tone_Back_To_Top_Button

Ein brutalistisch inspirierter "Back to Top"-Button mit Erdtönen, der für Blog-/Content-Websites entwickelt wurde. Es ist mäßig komplex, reaktionsschnell und unterstützt den Dunkelmodus. Der Knopf besticht durch ein kontrastreiches Design und eine leicht krude Ästhetik.

Offen