Volver al principio Componente de botón
Un botón 'Back to Top' receptivo con estética de Material Design, combinación de colores monocromática y compatibilidad con el modo oscuro. Aparece como un botón de acción flotante (FAB) en la esquina inferior derecha.
Código HTML
<div class="fixed bottom-4 right-4 z-50">
<button aria-label="Scroll to top" class="dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 dark:shadow-lg focus:outline-none dark:focus:ring-gray-500 rounded-full bg-gray-800 p-3 text-white shadow-md transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 active:scale-95 md:p-4 lg:p-5">
<svg class="h-6 w-6 md:h-7 md:w-7 lg:h-8 lg:w-8" 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>Componentes relacionados
Volver al principio Componente de botón - Brutalismo Tonos Tierra
Un complejo componente de botón 'Back to Top' diseñado en un estilo brutalista con una combinación de colores terrosos, adecuado para sitios de blogs/contenidos. Es responsivo e incluye soporte para modo oscuro.
Volver al principio Componente de botón
Un botón de regreso al principio receptivo diseñado con microinteracciones y colores vibrantes, adecuado para una interfaz de tablero con soporte de modo oscuro.
Botón neumórfico Volver al principio (azul océano)
Un simple componente de botón 'Back to Top' diseñado con un estilo neumórfico, utilizando tonos azul océano, adecuado para plataformas de música/audio. Es totalmente sensible y es compatible con el modo oscuro.