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 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.
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.
Volver al principio Componente de botón
Un botón de "volver al principio" para CRM/Business Tools, diseñado en un estilo Bauhaus con colores de alto contraste, con formas geométricas y capacidad de respuesta para todos los tamaños de pantalla, incluida la compatibilidad con el modo oscuro.