Torna all'inizio Componente pulsante
Un pulsante reattivo Torna all'inizio progettato in uno stile scheumorfico, con supporto per temi scuri ed effetti reattivi.
Codice HTML
<div class="fixed bottom-10 right-10 z-50">
<a href="#top" class="bg-white dark:bg-gray-800 rounded-full shadow-lg p-3 transition-transform transform hover:scale-110">
<img src="https://picsum.photos/50/50?random=1" alt="Back to Top" class="w-full h-full rounded-full">
</a>
<div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white text-sm rounded-lg shadow-md p-2 mt-2 text-center">
Back to Top
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-white { background-color: #1f2937; }
.bg-gray-200 { background-color: #4b5563; }
.bg-gray-700 { background-color: #2d3748; }
.text-gray-800 { color: #f7fafc; }
}
</style>
Componenti correlati
Torna all'inizio Componente pulsante
Un pulsante "torna all'inizio" per CRM/Business Tools, progettato in stile Bauhaus con colori ad alto contrasto, caratterizzato da forme geometriche e reattività per tutte le dimensioni dello schermo, incluso il supporto della modalità scura.
Torna all'inizio Componente pulsante
Un componente pulsante reattivo "Torna all'inizio" per i siti di e-commerce, caratterizzato da un design monocromatico in bianco e nero con un colore brillante e una microinterazione coinvolgente al passaggio del mouse. Include il supporto per la modalità oscura.
Pulsante Torna all'inizio
Un pulsante Torna all'inizio di Material Design che viene visualizzato quando l'utente scorre la pagina verso il basso. Include il supporto della modalità oscura e lo scorrimento fluido.