Brutalism_Earth_Tone_Back_To_Top_Button
Un bouton « Back to Top » d’inspiration brutaliste avec des tons de terre, conçu pour les blogs/sites de contenu. Il est modérément complexe, réactif et prend en charge le mode sombre. Le bouton présente un design très contrasté et une esthétique légèrement grossière.
HTML Code
<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>Composants associés
Retour en haut de la page Composant du bouton
Un simple bouton Retour en haut conçu dans un style brutaliste à l’aide de Tailwind CSS, adapté à un site web de portfolio. Il dispose d’une palette de couleurs en niveaux de gris et d’une prise en charge du thème sombre.
Brutalisme Retour en haut de la page
Un composant de bouton brutaliste de retour en haut utilisant des couleurs en niveaux de gris et Tailwind CSS. Il est réactif et prend en charge le mode sombre.
Retour en haut de la page Composant du bouton
Un bouton « Retour en haut » réactif qui suit les principes de conception matérielle, prenant en charge le mode sombre avec Tailwind CSS pour le style et les effets réactifs.