Pulsante Torna all'inizio - Progettazione 3D
Un pulsante Torna all'inizio con un design 3D, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS. Non è incluso alcun JavaScript.
Codice HTML
<div class="fixed bottom-4 right-4 group">
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg
transform transition-transform duration-300
group-hover:scale-110 group-active:scale-90
dark:bg-blue-800 dark:shadow-xl dark:group-hover:scale-110 dark:group-active:scale-90
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<svg class="h-6 w-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
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.
Pulsante Torna all'inizio
Componente pulsante con design 3D, combinazione di colori vivaci ed elementi interattivi complessi per interfacce di social media, utilizzando Tailwind CSS. Include un design reattivo e il supporto per i temi scuri.
Pulsante Torna all'inizio
Un semplice pulsante Torna all'inizio con design Glassmorphism e combinazione di colori monocromatici per siti di e-commerce.