Brutalism_Earth_Tone_Back_To_Top_Button
Un botón 'Back to Top' de inspiración brutalista con tonos tierra, diseñado para blogs/sitios de contenido. Es moderadamente complejo, responde y es compatible con el modo oscuro. El botón presenta un diseño de alto contraste y una estética ligeramente tosca.
Código HTML
<div class="fixed bottom-4 right-4 z-50 group" x-data="{ showButton: false }" @scroll.window="showButton = (window.pageYOffset > 300) ? true : false" x-show="showButton" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-90 -translate-y-4" x-transition:enter-end="opacity-100 scale-100 translate-y-0" x-cloak>
<button
@click="window.scrollTo({top: 0, behavior: 'smooth'})"
class="p-4 bg-lime-700 dark:bg-lime-900 border-2 border-stone-900 dark:border-stone-100
text-stone-100 dark:text-stone-100 text-xl font-bold uppercase
shadow-[4px_4px_0_0_rgba(28,25,23,1)] dark:shadow-[4px_4px_0_0_rgba(250,250,250,1)]
hover:bg-lime-800 dark:hover:bg-lime-950
active:shadow-[0px_0px_0_0_rgba(28,25,23,1)] active:translate-x-[4px] active:translate-y-[4px]
focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-amber-300/50
transition-all duration-150 ease-in-out
flex items-center justify-center space-x-2 w-16 h-16 sm:w-20 sm:h-20"
aria-label="Back to top"
>
<svg class="w-8 h-8 sm:w-10 sm:h-10 transform -rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="square" stroke-linejoin="square" stroke-width="3" d="M9 5l7 7-7 7"></path>
</svg>
</button>
<div class="absolute -top-1 -left-1 w-16 h-16 sm:w-20 sm:h-20 border-2 border-stone-900 dark:border-stone-100 pointer-events-none group-active:translate-x-[4px] group-active:translate-y-[4px] transition-all duration-150 ease-in-out"></div>
<div class="absolute top-1 left-1 w-16 h-16 sm:w-20 sm:h-20 border-2 border-stone-900 dark:border-stone-100 pointer-events-none group-active:translate-x-[4px] group-active:translate-y-[4px] transition-all duration-150 ease-in-out"></div>
</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
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.
Volver al principio Componente de botón
Un componente de botón 'Volver al principio' receptivo para sitios de documentación/wiki, inspirado en Memphis Design con un esquema de color púrpura/violeta. Incluye soporte para el modo oscuro y una apariencia compleja e interactiva.