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 "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

Zurück zum Anfang Schaltflächenkomponente

Eine reaktionsschnelle Schaltfläche "Zurück zum Anfang" in einem skeuomorphen Stil mit Unterstützung für dunkle Themen und reaktionsschnellen Effekten.

Offen

Zurück zum Anfang Schaltflächenkomponente

Eine reaktionsschnelle "Zurück zum Anfang"-Schaltflächenkomponente für Dokumentations-/Wiki-Seiten, inspiriert von Memphis Design mit einem lila/violetten Farbschema. Enthält Unterstützung für den Dunkelmodus und ein komplexes, interaktives Erscheinungsbild.

Offen