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ächenkomponente, die mit Material Design-Prinzipien, gedämpften Farben und Unterstützung für den Dunkelmodus gestaltet ist und sich für Blog- oder Content-Konsum-Websites eignet.

Vorschau

HTML-Code 

<div class="fixed bottom-4 right-4 z-50">
  <button
    onclick="window.scrollTo({top: 0, behavior: 'smooth'});"
    class="hidden md:flex items-center justify-center w-12 h-12 rounded-full shadow-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200
           hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500
           transition-all duration-300 ease-in-out transform hover:scale-110"
    aria-label="Back to top"
  >
    <svg
      class="w-6 h-6"
      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äche

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

Offen

Glassmorphism Rainbow Zurück zum Anfang Button für die Landwirtschaft

Eine komplexe, reaktionsschnelle "Zurück zum Anfang"-Schaltflächenkomponente mit einem Glasmorphismus-Design und einem Regenbogenverlauf, die auf Landwirtschafts-/Landwirtschafts-Websites zugeschnitten ist. Verfügt über Unschärfeeffekte und Unterstützung für den Dunkelmodus.

Offen

Zurück zum Anfang Schaltfläche

Zurück zum Anfang Schaltflächenkomponente mit 3D-Design, lebendigem Farbschema und komplexen interaktiven Elementen für Social-Media-Schnittstellen unter Verwendung von Tailwind CSS. Es beinhaltet responsives Design und Unterstützung für dunkle Themen.

Offen