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 receptivo 'Volver al principio' con un diseño artístico de acuarela, combinación de colores otoñales y compatibilidad con el modo oscuro, adecuado para sitios de blogs / contenido.
Botón Volver al principio
Un botón minimalista 'Back to Top' con efectos responsivos y soporte de temas oscuros usando Tailwind CSS.
Botón Volver al principio
Un simple y elegante botón de retroceso que aparece fijo en la esquina inferior derecha de la pantalla. Cuenta con una sutil combinación de colores pastel y microinteracciones suaves de desplazamiento/enfoque. El botón incluye un diseño responsivo con soporte incorporado para el modo oscuro. Al pasar el cursor sobre el botón, el botón se escala suavemente y cambia el color de fondo para proporcionar información visual. El componente solo utiliza clases CSS de Tailwind, sin necesidad de JavaScript.