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.
Codice HTML
<div class="fixed bottom-4 right-4 z-50">
<!-- Outer square container for Bauhaus aesthetic -->
<a href="#" class="group block w-14 h-14 md:w-16 md:h-16 lg:w-20 lg:h-20 bg-blue-600 dark:bg-yellow-400 p-1 md:p-2 lg:p-3 relative overflow-hidden transition-all duration-300 ease-in-out hover:scale-110 active:scale-95 shadow-lg dark:shadow-yellow-800/50">
<!-- Inner square acts as a focus element, rotates on hover -->
<div class="w-full h-full bg-red-600 dark:bg-black flex items-center justify-center transform transition-transform duration-300 ease-in-out group-hover:rotate-45">
<!-- Arrow Icon - Simple geometric shapes -->
<svg class="w-8 h-8 md:w-10 md:h-10 text-white dark:text-blue-600 transform -rotate-90 group-hover:scale-125 transition-transform duration-300 ease-in-out" 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>
</div>
<span class="sr-only">Back to Top</span>
</a>
</div>Componenti correlati
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.
Torna all'inizio Componente pulsante
Un componente pulsante Torna all'inizio reattivo con design Glassmorphism, combinazione di colori dei toni della terra e interazioni complesse, adatto per un cruscotto.
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.