Volver al principio Componente de botón
Un componente de botón Volver al principio receptivo con diseño de Glassmorphism, combinación de colores en tonos tierra e interacciones complejas, adecuado para un tablero.
Código HTML
<div class="fixed bottom-6 right-6">
<a href="#top" class="group block">
<button class="relative flex items-center justify-center w-16 h-16 bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-full shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-teal-500 dark:focus:ring-teal-400 focus:ring-opacity-70">
<svg class="w-8 h-8 text-gray-800 dark:text-gray-200 transform transition-transform duration-300 ease-in-out group-hover:-translate-y-1" 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>
<span class="absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-full opacity-0 group-hover:opacity-100 group-hover:translate-y-1/2 px-3 py-1 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 text-sm font-semibold rounded-md whitespace-nowrap transition-all duration-300 ease-in-out">
Back to Top
</span>
</button>
</a>
</div>
<div class="min-h-screen bg-gradient-to-br from-stone-100 via-stone-200 to-stone-300 dark:from-stone-800 dark:via-stone-900 dark:to-black flex flex-col items-center justify-center p-8">
<h1 id="top" class="text-5xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">Dashboard Overview</h1>
<p class="text-lg text-gray-700 dark:text-gray-300 max-w-2xl text-center mb-12">
Scroll down to see the
Componentes relacionados
Volver al principio Componente de botón
Un simple botón Volver al principio diseñado en un estilo brutalista utilizando Tailwind CSS, adecuado para un sitio web de portafolio. Cuenta con un esquema de color en escala de grises y soporte para temas oscuros.
Botón Volver al principio
Un botón Volver al principio de Material Design que aparece cuando el usuario se desplaza hacia abajo en la página. Incluye soporte para modo oscuro y desplazamiento suave.
Skeuomórfico Volver al botón superior
Un componente de botón 'Volver al principio' simple, receptivo y esqueumórfico para plataformas de foros/comunidades, diseñado con una paleta de colores bosque/verde y soporte completo para el modo oscuro.