Retour en haut de la page Composant du bouton
Un composant de bouton réactif « Retour en haut » conçu avec les principes de conception matérielle, les couleurs sourdes et la prise en charge du mode sombre, adapté aux blogs ou aux sites Web de consommation de contenu.
HTML Code
<div class="fixed bottom-4 right-4 z-50">
<button
onclick="window.scrollTo({top: 0, behavior: 'smooth'});"
class="hidden md:flex items-center justify-center w-12 h-12 rounded-full shadow-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200
hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500
transition-all duration-300 ease-in-out transform hover:scale-110"
aria-label="Back to top"
>
<svg
class="w-6 h-6"
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>
</button>
</div>
Composants associés
Retour en haut de la page Composant du bouton
Un composant de bouton réactif 'Back to Top' pour la documentation/les sites wiki, inspiré du design de Memphis avec une palette de couleurs violette/violette. Inclut la prise en charge du mode sombre et une apparence complexe et interactive.
Retour en haut de la page Composant du bouton
Un composant de bouton de retour en haut réactif avec un design Glassmorphism, une palette de couleurs de tons de terre et des interactions complexes, adapté à un tableau de bord.
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.