CCHub Logo CCHub Tailwind Collection
Komponenten Zurück zum Anfang Schaltfläche Zurück zum Anfang Schaltfläche - 3D Design

Zurück zum Anfang Schaltfläche - 3D Design

Eine Schaltfläche "Zurück zum Anfang" mit 3D-Design, responsiven Effekten und Unterstützung für dunkle Designs mithilfe von Tailwind CSS. Es ist kein JavaScript enthalten.

Vorschau

HTML-Code 

<div class="fixed bottom-4 right-4 group">
  <button class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg 
                 transform transition-transform duration-300 
                 group-hover:scale-110 group-active:scale-90 
                 dark:bg-blue-800 dark:shadow-xl dark:group-hover:scale-110 dark:group-active:scale-90 
                 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    <svg class="h-6 w-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 Button - Material Design Pastell

Eine reaktionsschnelle "Zurück zum Anfang"-Button-Komponente, die den Prinzipien des Material Designs mit einem pastellfarbenen Farbschema folgt und auf eine Portfolio-Website zugeschnitten ist. Es beinhaltet Responsive Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Zurück zum Anfang Schaltflächenkomponente

Ein einfacher Back-to-Top-Button, der in einem brutalistischen Stil mit Tailwind CSS gestaltet ist und sich für eine Portfolio-Website eignet. Es verfügt über ein Graustufen-Farbschema und Unterstützung für dunkle Themen.

Offen

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.

Offen