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

Zurück zum Anfang Schaltflächenkomponente

Ein "Zurück zum Anfang"-Button für CRM/Business-Tools, der im Bauhaus-Stil mit kontrastreichen Farben gestaltet ist, geometrische Formen aufweist und für alle Bildschirmgrößen reaktionsschnell ist, einschließlich Unterstützung des Dunkelmodus.

Vorschau

HTML-Code 

<div class="fixed bottom-4 right-4 z-50">
  <!-- Outer square container for Bauhaus aesthetic -->
  <a href="#" class="group block w-14 h-14 md:w-16 md:h-16 lg:w-20 lg:h-20 bg-blue-600 dark:bg-yellow-400 p-1 md:p-2 lg:p-3 relative overflow-hidden transition-all duration-300 ease-in-out hover:scale-110 active:scale-95 shadow-lg dark:shadow-yellow-800/50">
    <!-- Inner square acts as a focus element, rotates on hover -->
    <div class="w-full h-full bg-red-600 dark:bg-black flex items-center justify-center transform transition-transform duration-300 ease-in-out group-hover:rotate-45">
      <!-- Arrow Icon - Simple geometric shapes -->
      <svg class="w-8 h-8 md:w-10 md:h-10 text-white dark:text-blue-600 transform -rotate-90 group-hover:scale-125 transition-transform duration-300 ease-in-out" 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>
    </div>
    <span class="sr-only">Back to Top</span>
  </a>
</div>

Verwandte Komponenten

Zurück zum Anfang Schaltflächenkomponente

Eine reaktionsschnelle "Zurück zum Anfang"-Schaltflächenkomponente für E-Commerce-Websites mit einem schwarz-weißen, monochromen Design mit einer hellen Akzentfarbe und einer ansprechenden Mikrointeraktion beim Schweben. Enthält Unterstützung für den Dunkelmodus.

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

Art Deco Zurück zum Anfang Button

Eine komplexe, vom Art Deco inspirierte "Back to Top"-Button-Komponente mit geometrischen Mustern und luxuriösen Ozean-/Blautönen, die für gemeinnützige Websites entwickelt wurde. Beinhaltet Unterstützung für responsives Design und Dunkelmodus.

Offen