Retour en haut de la page Composant du bouton
Un bouton simple et artistique « Retour en haut » conçu pour les sites Web d’alimentation/restaurants, avec une esthétique en niveaux de gris inspirée de l’aquarelle. Il est réactif et prend en charge le mode sombre.
HTML Code
<a href="#" aria-label="Back to top" class="fixed bottom-4 right-4 md:bottom-8 md:right-8 z-50 group focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 dark:focus:ring-gray-100">
<div class="relative w-14 h-14 md:w-16 md:h-16 rounded-full overflow-hidden shadow-lg transform transition-all duration-300 group-hover:scale-110 group-active:scale-95 border-2 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800">
<!-- Artistic background layer -->
<div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-700 dark:to-gray-900 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
<!-- Example of a subtle watercolor texture effect (can be replaced with actual SVG or background image for more detail) -->
<svg class="absolute inset-0 w-full h-full opacity-30 group-hover:opacity-50 transition-opacity duration-300" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<filter id="watercolorFilter" x="-50%" y="-50%" width="200%" height="200%">
<feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" result="noise" />
<feDiffuseLighting in="noise" lighting-color="white" surfaceScale="2" result="light" />
<feBlend in="SourceGraphic" in2="light" mode="overlay" />
</filter>
</defs>
<rect width="100" height="100" fill="#fff" filter="url(#watercolorFilter)" class="dark:fill-gray-900"/>
</svg>
</div>
<div class="absolute inset-0 flex items-center justify-center">
<svg class="w-8 h-8 md:w-9 md:h-9 text-gray-700 dark:text-gray-300 transform transition-transform duration-300 group-hover:-translate-y-1 group-active:translate-y-0" 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>
</div>
</a>Composants associés
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.
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 du bouton
Un composant de bouton « Retour en haut » minimal et réactif avec prise en charge du mode sombre. Il apparaît après avoir fait défiler vers le bas et utilise un défilement fluide pour ramener l’utilisateur en haut de la page lorsqu’il clique dessus. Aucun JavaScript n’est utilisé pour le défilement, seulement du CSS.