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
Pulsante Torna all'inizio
Pulsante Torna all'inizio con design neumorfico, combinazione di colori monocromatici e supporto per la modalità scura. Utilizza Tailwind 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.
Torna all'inizio Pulsante - Material Design Pastello
Un componente pulsante "Torna all'inizio" reattivo che segue i principi del Material Design con una combinazione di colori pastello, su misura per un sito Web di portfolio. Include un design reattivo e il supporto per la modalità oscura utilizzando Tailwind CSS.