Torna all'inizio Componente pulsante
Un componente minimalista e piatto del pulsante Torna all'inizio per i cruscotti, caratterizzato da una combinazione di colori monocromatica. È moderatamente complesso con funzionalità interattive, un design reattivo e il supporto per i temi scuri, costruito esclusivamente con HTML e Tailwind CSS.
Codice HTML
<div class="fixed bottom-4 right-4">
<a href="#" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-full shadow-md hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors duration-300 ease-in-out flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
</a>
</div>Componenti correlati
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.
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 componente minimalista e piatto per il pulsante Torna all'inizio per i siti Web di e-commerce, che utilizza una combinazione di colori in scala di grigi e un design reattivo con supporto per temi scuri.