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

Zurück zum Anfang Schaltfläche

Ein minimalistischer "Back to Top"-Button mit responsiven Effekten und Unterstützung für dunkle Themen mit Tailwind CSS.

Vorschau

HTML-Code 

<div class="fixed bottom-5 right-5 z-50">
  <a href="#" class="flex items-center justify-center w-12 h-12 bg-blue-500 text-white rounded-full shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
    </svg>
  </a>
</div>

<style>
  @media (prefers-color-scheme: dark) {
    .bg-blue-500 {
      background-color: #3b82f6;
    }
    .hover\:bg-blue-600:hover {
      background-color: #2563eb;
    }
  }
</style>

Verwandte Komponenten

Zurück zum Anfang Schaltflächenkomponente

Eine reaktionsschnelle Schaltfläche "Zurück zum Anfang" mit auf Mikrointeraktion ausgerichteten Animationen, einem triadischen Farbschema und Unterstützung für dunkle Themen, die für ein Portfolio geeignet sind.

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

Zurück zum Anfang Schaltfläche

Eine Material Design-Schaltfläche Zurück zum Anfang, die angezeigt wird, wenn der Benutzer auf der Seite nach unten scrollt. Es bietet Unterstützung für den Dunkelmodus und flüssiges Scrollen.

Offen