Torna all'inizio Componente pulsante
Un pulsante "Torna all'inizio" reattivo con estetica Material Design, combinazione di colori monocromatica e supporto per la modalità scura. Viene visualizzato come un pulsante di azione mobile (FAB) nell'angolo in basso a destra.
Codice HTML
<div class="fixed bottom-4 right-4 z-50">
<button aria-label="Scroll to top" class="dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 dark:shadow-lg focus:outline-none dark:focus:ring-gray-500 rounded-full bg-gray-800 p-3 text-white shadow-md transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 active:scale-95 md:p-4 lg:p-5">
<svg class="h-6 w-6 md:h-7 md:w-7 lg:h-8 lg:w-8" 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 pulsante minimalista "Torna all'inizio" con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Pulsante Torna all'inizio
Un pulsante back-to-top semplice ed elegante che appare fisso nell'angolo in basso a destra dello schermo. Presenta una sottile combinazione di colori pastello e microinterazioni fluide al passaggio del mouse/messa a fuoco. Il pulsante include un design reattivo con supporto integrato per la modalità oscura. Quando si passa il mouse, il pulsante si ingrandisce delicatamente e cambia il colore di sfondo per fornire un feedback visivo. Il componente utilizza solo le classi CSS di Tailwind, senza bisogno di JavaScript.
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.