Componenti Pulsante Torna all'inizio Pulsante Torna all'inizio

Pulsante Torna all'inizio

Un componente pulsante Torna all'inizio con microinterazioni, combinazione di colori dei toni della terra, layout semplice per siti Web aziendali/aziendali; design reattivo con supporto per la modalità oscura utilizzando Tailwind CSS

Anteprima

Codice HTML

<!-- Back to Top Button Component -->
<a href="#top" class="fixed bottom-6 right-6 flex items-center justify-center w-12 h-12 bg-emerald-700 text-white rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-500" aria-label="Back to Top">
  <span class="sr-only">Back to Top</span>
  <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/>
  </svg>
</a>

<!-- To enable smooth scrolling behavior across the page, add the `scroll-smooth` class to your `<html>` element: -->
<!-- <html class="scroll-smooth"> -->

Componenti correlati

Torna all'inizio Componente pulsante

Un componente minimalista e piatto del pulsante Torna all'inizio per i cruscotti, caratterizzato da una combinazione di colori monocromatica. È moderatamente complesso con funzionalità interattive, un design reattivo e il supporto per i temi scuri, costruito esclusivamente con HTML e Tailwind CSS.

Aperto

Brutalismo Torna all'inizio Pulsante

Torna all'inizio Componente pulsante con stile Brutalismo, combinazione di colori triadica e complessità complessa. Design reattivo con supporto per temi scuri. Niente JavaScript.

Aperto

Pulsante Torna all'inizio

Un componente pulsante "Torna all'inizio" minimale e reattivo con supporto per la modalità scura. Viene visualizzato dopo lo scorrimento verso il basso e utilizza lo scorrimento uniforme per riportare l'utente all'inizio della pagina quando viene cliccato. Per lo scorrimento non viene utilizzato JavaScript, ma solo CSS.

Aperto