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
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.
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
Pulsante Neumorfico Torna all'Inizio (Blu Oceano)
Un semplice componente pulsante "Torna all'inizio" progettato con uno stile neumorfico, utilizzando toni blu oceano, adatto per piattaforme musicali/audio. È completamente reattivo e supporta la modalità oscura.