Torna all'inizio Componente pulsante
Un semplice pulsante Torna all'inizio progettato in stile brutalista utilizzando Tailwind CSS, adatto per un sito web di portfolio. È dotato di una combinazione di colori in scala di grigi e supporto per temi scuri.
Codice HTML
<div class="fixed bottom-5 right-5 z-50">
<a href="#top" class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800 text-white hover:bg-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 transition-all duration-300 shadow-lg">
⬆️
</a>
</div>
<div class="h-screen bg-gray-100 dark:bg-gray-800" id="top">
<div class="container mx-auto p-5">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">Portfolio</h1>
<p class="text-gray-700 dark:text-gray-300">Showcasing my work and products.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-5">
<div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
<img src="https://picsum.photos/200" alt="Portfolio item" class="w-full rounded-lg">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
<p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
</div>
<div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
<img src="https://picsum.photos/201" alt="Portfolio item" class="w-full rounded-lg">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
<p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
</div>
<div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
<img src="https://picsum.photos/202" alt="Portfolio item" class="w-full rounded-lg">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
<p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
</div>
</div>
</div>
</div>Componenti correlati
Pulsante Torna all'inizio
Un pulsante Torna all'inizio dal design minimalista e piatto che si inserisce all'interno di un'interfaccia dashboard. Il pulsante è disegnato in una combinazione di colori monocromatici e include effetti di passaggio del mouse e messa a fuoco per una migliore interattività. È anche reattivo e supporta la modalità oscura.
Pulsante Skeuomorphic Torna all'inizio
Un pulsante scheumorfico "Torna all'inizio" progettato con neutri caldi per siti Web aziendali/aziendali, con design reattivo e supporto per la modalità scura. Il pulsante ha un effetto di pressione 3D.
Brutalism_Earth_Tone_Back_To_Top_Button
Un pulsante "Torna all'inizio" di ispirazione brutalista con toni della terra, progettato per blog/siti di contenuti. È moderatamente complesso, reattivo e supporta la modalità oscura. Il pulsante presenta un design ad alto contrasto e un'estetica leggermente grezza.