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.
Código HTML
<div class="fixed bottom-4 right-4 z-50">
<!-- Outer square container for Bauhaus aesthetic -->
<a href="#" class="group block w-14 h-14 md:w-16 md:h-16 lg:w-20 lg:h-20 bg-blue-600 dark:bg-yellow-400 p-1 md:p-2 lg:p-3 relative overflow-hidden transition-all duration-300 ease-in-out hover:scale-110 active:scale-95 shadow-lg dark:shadow-yellow-800/50">
<!-- Inner square acts as a focus element, rotates on hover -->
<div class="w-full h-full bg-red-600 dark:bg-black flex items-center justify-center transform transition-transform duration-300 ease-in-out group-hover:rotate-45">
<!-- Arrow Icon - Simple geometric shapes -->
<svg class="w-8 h-8 md:w-10 md:h-10 text-white dark:text-blue-600 transform -rotate-90 group-hover:scale-125 transition-transform duration-300 ease-in-out" 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>
</div>
<span class="sr-only">Back to Top</span>
</a>
</div>Componentes relacionados
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.
Botón Volver al principio
Botón Volver arriba para comercio electrónico, con un vibrante diseño de modo oscuro.
Botón Volver al principio
Un componente de botón "Volver al principio" mínimo y receptivo con soporte para modo oscuro. Aparece después de desplazarse hacia abajo y utiliza un desplazamiento suave para devolver al usuario a la parte superior de la página cuando se hace clic en él. No se utiliza JavaScript para el desplazamiento, solo CSS.