Komponenten Zurück zum Anfang Schaltfläche Zurück zum Anfang Schaltflächenkomponente

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.

Vorschau

HTML-Code

<div class="fixed bottom-6 right-6">
  <a href="#top" class="group block">
    <button class="relative flex items-center justify-center w-16 h-16 bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-full shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-teal-500 dark:focus:ring-teal-400 focus:ring-opacity-70">
      <svg class="w-8 h-8 text-gray-800 dark:text-gray-200 transform 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>
      <span class="absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-full opacity-0 group-hover:opacity-100 group-hover:translate-y-1/2 px-3 py-1 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 text-sm font-semibold rounded-md whitespace-nowrap transition-all duration-300 ease-in-out">
        Back to Top
      </span>
    </button>
  </a>
</div>

<div class="min-h-screen bg-gradient-to-br from-stone-100 via-stone-200 to-stone-300 dark:from-stone-800 dark:via-stone-900 dark:to-black flex flex-col items-center justify-center p-8">
  <h1 id="top" class="text-5xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">Dashboard Overview</h1>
  <p class="text-lg text-gray-700 dark:text-gray-300 max-w-2xl text-center mb-12">
    Scroll down to see the 

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ächenkomponente

Eine reaktionsschnelle Zurück-zu-oben-Schaltfläche, die mit Mikrointeraktionen und lebendigen Farben gestaltet wurde und sich für eine Dashboard-Oberfläche mit Unterstützung für den Dunkelmodus eignet.

Offen

Brutalistischer Back to Top Button

Ein brutalistischer Back-to-Top-Button in Tailwind CSS mit hohem Kontrast, fetter Typografie und scharfen Kanten. Beinhaltet Unterstützung für reaktionsschnelle Größen und Dunkelmodus.

Offen