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.
Codice HTML
<button onclick="window.scrollTo({top: 0, behavior: 'smooth'})" class="fixed bottom-6 right-6 p-3 rounded-full bg-pink-200 dark:bg-pink-900 text-pink-700 dark:text-pink-200 shadow-md hover:bg-pink-300 dark:hover:bg-pink-800 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-700 hover:scale-110 focus:scale-110 transition-all duration-300 group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform group-hover:-translate-y-1 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
<span class="sr-only">Back to top</span>
</button>Componenti correlati
Torna all'inizio Componente pulsante
Un componente pulsante Torna all'inizio reattivo con design Glassmorphism, combinazione di colori dei toni della terra e interazioni complesse, adatto per un cruscotto.
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.
Pulsante Torna all'inizio
Un pulsante minimalista "Torna all'inizio" con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.