Pulsante Torna all'inizio

Un componente minimalista e piatto per il pulsante Torna all'inizio per i siti Web di e-commerce, che utilizza una combinazione di colori in scala di grigi e un design reattivo con supporto per temi scuri.

Anteprima

Codice HTML

<div class="fixed bottom-5 right-5 z-50">
    <button class="bg-gray-800 text-white rounded-full p-3 shadow-md hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400 transition-all duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
    </button>
</div>

Componenti correlati

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.

Aperto

Torna all'inizio Componente pulsante

Un componente Back to Top Button in stile brutalista che utilizza Tailwind CSS. Questo componente ha un design audace e ad alto contrasto e supporta effetti reattivi e tema scuro.

Aperto

Art Déco Torna all'inizio Pulsante

Un complesso pulsante "Back to Top" ispirato all'Art Déco con motivi geometrici e lussuose tonalità Ocean/Blue, progettato per siti web senza scopo di lucro/beneficenza. Include il design reattivo e il supporto per la modalità scura.

Aperto