Retour en haut de la page Composant du bouton
Un bouton « Retour en haut » réactif avec des animations axées sur la micro-interaction, une palette de couleurs triadique et une prise en charge du thème sombre, adapté à un portfolio.
HTML Code
<div class="fixed bottom-6 right-6">
<a href="#top" class="group relative flex items-center justify-center p-3 rounded-full bg-blue-500 text-white shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:scale-110 dark:focus:ring-blue-800">
<svg class="w-6 h-6 transform transition-transform duration-300 group-hover:-translate-y-1 group-hocus:-translate-y-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7l4-4m0 0l4 4m-4-4v18"></path>
</svg>
<span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xs font-semibold opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 delay-150">Back to Top</span>
</a>
</div>Composants associés
Retour en haut de la page Composant du bouton
Un bouton réactif Retour en haut conçu dans un style skeuomorphe, avec prise en charge du thème sombre et effets réactifs.
Retour en haut du bouton
Un bouton Material Design Back to Top qui apparaît lorsque l’utilisateur fait défiler la page. Il comprend la prise en charge du mode sombre et un défilement fluide.
Retour en haut du bouton
Un bouton de retour en haut minimaliste et plat qui s’intègre dans l’interface d’un tableau de bord. Le bouton est doté d’une palette de couleurs monochromatiques et comprend des effets de survol et de mise au point pour une meilleure interactivité. Il est également réactif et prend en charge le mode sombre.