Volver al principio Componente de botón
Un componente de botón 'Volver al principio' receptivo diseñado con principios de diseño de materiales, colores apagados y compatibilidad con modo oscuro, adecuado para blogs o sitios web de consumo de contenido.
Código HTML
<div class="fixed bottom-4 right-4 z-50">
<button
onclick="window.scrollTo({top: 0, behavior: 'smooth'});"
class="hidden md:flex items-center justify-center w-12 h-12 rounded-full shadow-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200
hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500
transition-all duration-300 ease-in-out transform hover:scale-110"
aria-label="Back to top"
>
<svg
class="w-6 h-6"
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
Retro_Back_To_Top_Button
Retro/Vintage - Componente de botón nostálgico Volver al principio para el consumo de blog/contenido con esquema de color análogo. Diseño complejo con soporte de modo responsivo y oscuro.
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.
Volver al principio Componente de botón
Un botón responsivo 'Volver al principio' que sigue los principios de Material Design, compatible con el modo oscuro con Tailwind CSS para efectos de estilo y responsivos.