Torna all'inizio Componente pulsante
Un componente pulsante reattivo "Torna all'inizio" con i principi del Material Design, colori tenui e supporto per la modalità scura, adatto per blog o siti Web di consumo di contenuti.
Codice HTML
<div class="fixed bottom-4 right-4 z-50">
<button
onclick="window.scrollTo({top: 0, behavior: 'smooth'});"
class="hidden md:flex items-center justify-center w-12 h-12 rounded-full shadow-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200
hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500
transition-all duration-300 ease-in-out transform hover:scale-110"
aria-label="Back to top"
>
<svg
class="w-6 h-6"
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>
</button>
</div>Componenti correlati
Pulsante Torna all'inizio
Un componente reattivo del pulsante Torna all'inizio progettato con un effetto glassmorphism, adatto per siti Web aziendali professionali. Presenta un layout semplice con elementi minimi e funziona bene sia con temi chiari che scuri.
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.
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.