Torna all'inizio Componente pulsante
Un pulsante "Torna all'inizio" reattivo che segue i principi del Material Design, supportando la modalità oscura con Tailwind CSS per lo stile e gli effetti reattivi.
Codice HTML
<div class="fixed bottom-5 right-5 z-50">
<button class="bg-blue-500 text-white rounded-full p-2 shadow-lg transition-transform transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:shadow-md dark:focus:ring-blue-300">
<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="M12 4v16m0 0L8 16m4 4l4-4" />
</svg>
</button>
</div>
<style>
/* Tailwind dark mode support */
@media (prefers-color-scheme: dark) {
.bg-blue-500 { background-color: #3b82f6; }
.bg-blue-700 { background-color: #2563eb; }
.text-white { color: #ffffff; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.dark .shadow-md { box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); }
}
</style>Componenti correlati
Torna all'inizio Componente pulsante
Un pulsante "Torna all'inizio" reattivo e visivamente accattivante con una combinazione di colori triadica, sfumature e transizioni fluide, adatto per un sito portfolio, incluso il supporto della modalità scura.
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
Torna all'inizio Componente pulsante
Un pulsante reattivo per tornare all'inizio progettato con microinterazioni e colori vivaci, adatto per un'interfaccia dashboard con supporto per la modalità oscura.