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.
Código HTML
<div class="fixed bottom-10 right-10 z-50">
<a href="#top" class="bg-white dark:bg-gray-800 rounded-full shadow-lg p-3 transition-transform transform hover:scale-110">
<img src="https://picsum.photos/50/50?random=1" alt="Back to Top" class="w-full h-full rounded-full">
</a>
<div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white text-sm rounded-lg shadow-md p-2 mt-2 text-center">
Back to Top
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-white { background-color: #1f2937; }
.bg-gray-200 { background-color: #4b5563; }
.bg-gray-700 { background-color: #2d3748; }
.text-gray-800 { color: #f7fafc; }
}
</style>
Componentes relacionados
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 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.
Volver al principio Componente de botón
Un simple botón Volver al principio diseñado en un estilo brutalista utilizando Tailwind CSS, adecuado para un sitio web de portafolio. Cuenta con un esquema de color en escala de grises y soporte para temas oscuros.