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
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.
Brutaliste Retour en haut Bouton
Un bouton brutaliste de retour en haut en Tailwind CSS, avec un contraste élevé, une typographie audacieuse et des bords nets. Comprend un dimensionnement réactif et la prise en charge du 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.