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

Neumorphische Schaltfläche "Zurück zum Anfang"

Ein neumorpher "Back to Top"-Button für den E-Commerce, der ein subtiles, weiches UI-Design bietet, das mit zarten Schatten mit dem Hintergrund verschmilzt. Es verfügt über analoge Farben für ein harmonisches Aussehen, ein einfaches Layout und ein responsives Design mit Unterstützung für dunkle Themen, ideal für Online-Shopping-Erlebnisse.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <a href="#" class="back-to-top-button relative p-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center transition-all duration-300 hover:shadow-neumorphic-light-hover dark:hover:shadow-neumorphic-dark-hover"
    aria-label="Back to top">
    <svg class="w-6 h-6 text-indigo-600 dark:text-purple-400" 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>
  </a>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #cbced1, -8px -8px 16px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #2e2e2e;
  }

  .shadow-neumorphic-light-hover {
    box-shadow: inset 6px 6px 12px #cbced1, inset -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphic-dark-hover {
    box-shadow: inset 6px 6px 12px #1a1a1a, inset -6px -6px 12px #2e2e2e;
  }
</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

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

Zurück zum Anfang Schaltflächenkomponente

Eine reaktionsschnelle "Zurück zum Anfang"-Schaltflächenkomponente, die für den E-Commerce entwickelt wurde und sich durch ein lebendiges Farbschema auf dunklem Hintergrund auszeichnet. Es enthält einen subtilen Hover-Effekt und sorgt mit Unterstützung des Dunkelmodus für Sichtbarkeit über alle Bildschirmgrößen hinweg.

Offen