Componenti Pulsante Torna all'inizio Torna all'inizio Componente pulsante

Torna all'inizio Componente pulsante

Un componente pulsante Torna all'inizio reattivo con design Glassmorphism, combinazione di colori dei toni della terra e interazioni complesse, adatto per un cruscotto.

Anteprima

Codice HTML

<div class="fixed bottom-6 right-6">
  <a href="#top" class="group block">
    <button class="relative flex items-center justify-center w-16 h-16 bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-full shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-teal-500 dark:focus:ring-teal-400 focus:ring-opacity-70">
      <svg class="w-8 h-8 text-gray-800 dark:text-gray-200 transform transition-transform duration-300 ease-in-out group-hover:-translate-y-1" 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>
      <span class="absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-full opacity-0 group-hover:opacity-100 group-hover:translate-y-1/2 px-3 py-1 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 text-sm font-semibold rounded-md whitespace-nowrap transition-all duration-300 ease-in-out">
        Back to Top
      </span>
    </button>
  </a>
</div>

<div class="min-h-screen bg-gradient-to-br from-stone-100 via-stone-200 to-stone-300 dark:from-stone-800 dark:via-stone-900 dark:to-black flex flex-col items-center justify-center p-8">
  <h1 id="top" class="text-5xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">Dashboard Overview</h1>
  <p class="text-lg text-gray-700 dark:text-gray-300 max-w-2xl text-center mb-12">
    Scroll down to see the 

Componenti correlati

Pulsante Skeuomorphic Torna all'inizio

Un componente del pulsante "Torna all'inizio" semplice, reattivo e schemorfico per piattaforme di forum/comunità, progettato con una tavolozza di colori foresta/verde e supporto completo per la modalità scura.

Aperto

Pulsante Torna all'inizio

Un pulsante Torna all'inizio di Material Design che viene visualizzato quando l'utente scorre la pagina verso il basso. Include il supporto della modalità oscura e lo scorrimento fluido.

Aperto

Torna all'inizio Componente pulsante

Un componente pulsante reattivo "Torna all'inizio" progettato per l'e-commerce, caratterizzato da una combinazione di colori vivaci su uno sfondo scuro. Include un sottile effetto hover e garantisce la visibilità su tutte le dimensioni dello schermo con il supporto della modalità oscura.

Aperto