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

Torna all'inizio Componente pulsante

Un pulsante "Torna all'inizio" reattivo con animazioni incentrate sulla microinterazione, combinazione di colori triadici e supporto per temi scuri, adatto per un portfolio.

Anteprima

Codice HTML

<div class="fixed bottom-6 right-6">
  <a href="#top" class="group relative flex items-center justify-center p-3 rounded-full bg-blue-500 text-white shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:scale-110 dark:focus:ring-blue-800">
    <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:-translate-y-1 group-hocus:-translate-y-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7l4-4m0 0l4 4m-4-4v18"></path>
    </svg>
    <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xs font-semibold opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 delay-150">Back to Top</span>
  </a>
</div>

Componenti correlati

Pulsante Torna all'inizio

Pulsante Torna all'inizio con design neumorfico, combinazione di colori monocromatici e supporto per la modalità scura. Utilizza Tailwind CSS.

Aperto

Brutalista Torna all'inizio

Un brutalista componente del pulsante Back to Top che utilizza colori in scala di grigi e CSS Tailwind. È reattivo e supporta la modalità oscura.

Aperto

Torna all'inizio Componente pulsante

Un componente pulsante reattivo "Torna all'inizio" per i siti di e-commerce, caratterizzato da un design monocromatico in bianco e nero con un colore brillante e una microinterazione coinvolgente al passaggio del mouse. Include il supporto per la modalità oscura.

Aperto