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.
Codice HTML
<div class="fixed bottom-5 right-5 z-50">
<button
class="back-to-top-btn bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-white p-4 rounded-full shadow-lg transform transition-transform duration-300 hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800"
aria-label="Back to top"
>
<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="M5 10l7-7m0 0l7 7m-7-7v18"
></path>
</svg>
</button>
</div>
<style>
.back-to-top-btn {
/* Adding basic 3D effect with box-shadow */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2),
0 6px 6px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease-in-out;
}
.back-to-top-btn:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.22);
}
.back-to-top-btn:active {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
}
</style>Componenti correlati
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.
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.
Pulsante Torna all'inizio
Un componente reattivo del pulsante Torna all'inizio progettato con un effetto glassmorphism, adatto per siti Web aziendali professionali. Presenta un layout semplice con elementi minimi e funziona bene sia con temi chiari che scuri.