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.
Código HTML
<div class="fixed bottom-4 right-4">
<a href="#" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-full shadow-md hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors duration-300 ease-in-out flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
</a>
</div>Componentes relacionados
Botón Volver al principio
Un botón Volver al principio minimalista y de diseño plano que cabe dentro de la interfaz de un tablero. El botón está diseñado en un esquema de color monocromático e incluye efectos de desplazamiento y enfoque para una mejor interactividad. También es sensible y admite el modo oscuro.
Botón Volver al principio
Un simple y elegante botón de retroceso que aparece fijo en la esquina inferior derecha de la pantalla. Cuenta con una sutil combinación de colores pastel y microinteracciones suaves de desplazamiento/enfoque. El botón incluye un diseño responsivo con soporte incorporado para el modo oscuro. Al pasar el cursor sobre el botón, el botón se escala suavemente y cambia el color de fondo para proporcionar información visual. El componente solo utiliza clases CSS de Tailwind, sin necesidad de JavaScript.
Botón Neumórfico Volver al principio
Un botón neumórfico "Back to Top" para el comercio electrónico, que ofrece un diseño de interfaz de usuario sutil y suave que se funde con el fondo mediante delicadas sombras. Cuenta con colores análogos para una apariencia armoniosa, un diseño simple y un diseño receptivo con soporte para temas oscuros, ideal para experiencias de compra en línea.