Volver al principio Componente de botón
Un componente de botón Volver al principio de estilo brutalista que usa Tailwind CSS. Este componente tiene un diseño audaz y de alto contraste y admite efectos responsivos y tema oscuro.
Código HTML
<div class="fixed bottom-5 right-5">
<a href="#top" class="bg-white dark:bg-gray-800 text-black dark:text-white p-4 rounded-lg shadow-lg font-bold transition-all duration-300 ease-in-out transform hover:scale-105 hover:bg-gray-300 dark:hover:bg-gray-700">
<span class="text-xl">⬆️</span>
</a>
</div>
<style>
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
/* General styles */
body {
font-family: 'Courier New', Courier, monospace;
background-color: white;
color: black;
transition: background-color 0.5s, color 0.5s;
}
</style>Componentes relacionados
Volver arriba Botón - Brutalismo
Un componente brutalista del botón "Volver al principio" para un portafolio, con una combinación de colores triádica y un diseño sencillo. Es responsivo y admite el modo oscuro usando Tailwind CSS.
Botón neumórfico Volver al principio (azul océano)
Un simple componente de botón 'Back to Top' diseñado con un estilo neumórfico, utilizando tonos azul océano, adecuado para plataformas de música/audio. Es totalmente sensible y es compatible con el modo oscuro.
Brutalismo Volver al botón de inicio
Volver al principio Componente de botón con estilo Brutalismo, combinación de colores triádica y complejidad compleja. Diseño responsivo con soporte para temas oscuros. Sin JavaScript.