Componenti Pulsante Torna all'inizio Torna all'inizio Componente pulsante

Torna all'inizio Componente pulsante

Un componente Back to Top Button in stile brutalista che utilizza Tailwind CSS. Questo componente ha un design audace e ad alto contrasto e supporta effetti reattivi e tema scuro.

Anteprima

Codice HTML

<div class="fixed bottom-5 right-5">
    <a href="#top" class="bg-white dark:bg-gray-800 text-black dark:text-white p-4 rounded-lg shadow-lg font-bold transition-all duration-300 ease-in-out transform hover:scale-105 hover:bg-gray-300 dark:hover:bg-gray-700">
        <span class="text-xl">⬆️</span>
    </a>
</div>

<style>
    /* Dark Mode Support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: black;
            color: white;
        }
    }

    /* General styles */
    body {
        font-family: 'Courier New', Courier, monospace;
        background-color: white;
        color: black;
        transition: background-color 0.5s, color 0.5s;
    }
</style>

Componenti correlati

Torna all'inizio Componente pulsante

Un pulsante "Torna all'inizio" reattivo con un design artistico ad acquerello, combinazione di colori autunnali e supporto per la modalità scura, adatto per blog/siti di contenuti.

Aperto

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.

Aperto

Torna all'inizio Componente pulsante

Un componente reattivo del pulsante 'Torna all'inizio' per la documentazione/siti wiki, ispirato a Memphis Design con una combinazione di colori viola/viola. Include il supporto per la modalità oscura e un aspetto complesso e interattivo.

Aperto