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 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.
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 Volver al principio
Un componente de botón Volver al principio receptivo diseñado con un efecto de morfismo de vidrio, adecuado para sitios web comerciales profesionales. Presenta un diseño simple con elementos mínimos y funciona bien tanto en temas claros como oscuros.