Retro_Back_To_Top_Button
Retrò / Vintage - Nostalgico componente pulsante Torna all'inizio per il consumo di blog/contenuti con combinazione di colori analoga. Design complesso con supporto per la modalità reattiva e oscura.
Codice HTML
<div class="fixed bottom-5 right-5">
<a href="#"
class="group flex items-center justify-center p-4 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-red-500 text-white shadow-lg transform transition-all duration-300 hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:from-purple-700 dark:via-pink-700 dark:to-red-700 dark:focus:ring-purple-800"
aria-label="Back to top">
<svg class="h-8 w-8 transition-transform duration-300 group-hover:-translate-y-1" 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>
</a>
</div>Componenti correlati
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.
Torna all'inizio Componente pulsante
Un pulsante "Torna all'inizio" reattivo con un design artistico ad acquerello, combinazione di colori autunnali e supporto per la modalità scura, adatto per blog/siti di contenuti.
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.