Volver al principio Componente de botón
Un botón 'Volver al principio' sensible y visualmente atractivo con un esquema de color triádico, degradado y transiciones suaves, adecuado para un sitio de cartera, incluida la compatibilidad con el modo oscuro.
Código HTML
<div class="fixed bottom-6 right-6 z-50">
<!-- The button is initially hidden and would be revealed by JS on scroll -->
<!-- For demonstration, it's always visible here. In a real app, add a 'hidden' class by default -->
<button aria-label="Scroll to top" class="group flex h-14 w-14 items-center justify-center rounded-full shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
bg-gradient-to-br from-emerald-400 via-teal-500 to-blue-600
dark:from-emerald-600 dark:via-teal-700 dark:to-blue-800">
<svg class="h-8 w-8 text-white 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>
</button>
</div>Componentes relacionados
Brutalism_Earth_Tone_Back_To_Top_Button
Un botón 'Back to Top' de inspiración brutalista con tonos tierra, diseñado para blogs/sitios de contenido. Es moderadamente complejo, responde y es compatible con el modo oscuro. El botón presenta un diseño de alto contraste y una estética ligeramente tosca.
Volver al principio Componente de botón
Un componente de botón 'Volver al principio' receptivo diseñado para el comercio electrónico, con una combinación de colores vibrantes sobre un fondo oscuro. Incluye un sutil efecto de desplazamiento y garantiza la visibilidad en todos los tamaños de pantalla con soporte para el modo oscuro.
Volver al principio Componente de botón
Un componente de botón Back to Top minimalista y plano para tableros, con un esquema de color monocromático. Es moderadamente complejo con características interactivas, un diseño responsivo y soporte para temas oscuros, construido puramente con HTML y Tailwind CSS.