Volver al principio Componente de botón
Un componente de botón 'Volver al principio' receptivo para sitios de comercio electrónico, con un diseño monocromático en blanco y negro con un color de acento brillante y una microinteracción atractiva al pasar el mouse. Incluye soporte para modo oscuro.
Código HTML
<div class="fixed bottom-4 right-4 z-50">
<!-- Back to Top Button -->
<a href="#top" aria-label="Scroll back to top of page" class="group outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 rounded-full">
<button class="relative w-12 h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 flex items-center justify-center bg-white dark:bg-gray-800 rounded-full shadow-lg transition-all duration-300 ease-in-out transform group-hover:-translate-y-1 group-focus:-translate-y-1 group-active:-translate-y-1 group-hover:scale-105 group-focus:scale-105 group-active:scale-105 overflow-hidden border border-gray-200 dark:border-gray-700">
<!-- Background accent on hover -->
<div class="absolute inset-0 bg-purple-500 rounded-full scale-0 group-hover:scale-100 group-focus:scale-100 group-active:scale-100 transition-transform duration-300 ease-out"></div>
<!-- SVG Icon -->
<svg class="relative w-6 h-6 md:w-7 md:h-7 lg:w-8 lg:h-8 text-gray-800 dark:text-white group-hover:text-white dark:group-hover:text-white transition-colors 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>
</button>
</a>
</div>Componentes relacionados
Volver al principio Componente de botón
Un botón Volver al principio responsivo diseñado en un estilo skeuomórfico, con soporte para temas oscuros y efectos responsivos.
Botón Volver al principio
Un simple botón Volver al principio con diseño de Glassmorphism y esquema de color monocromático para sitios web de comercio electrónico.
Volver al principio Componente de botón
Un botón de regreso al principio receptivo con un diseño inspirado en el papel / impresión, que usa un esquema de color en blanco y negro con un acento sutil. Adecuado para plataformas educativas, incluye soporte para modo oscuro y un diseño limpio y accesible.