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 « Retour en haut » réactif avec l’esthétique du Material Design, la palette de couleurs monochromatiques et la prise en charge du mode sombre. Il apparaît sous la forme d’un bouton d’action flottant (FAB) dans le coin inférieur droit.
Skeuomorphic Retour en haut du bouton
Un composant de bouton « Retour en haut » simple, réactif et seumorphe pour les plates-formes de forum/communauté, conçu avec une palette de couleurs forêt/vert et une prise en charge complète du mode sombre.
Retour en haut du bouton
Un bouton simple et élégant de retour en haut qui apparaît fixe dans le coin inférieur droit de l’écran. Dispose d’une palette de couleurs pastel subtile et de micro-interactions fluides. Le bouton comprend un design réactif avec prise en charge intégrée du mode sombre. Lorsqu’il est survolé, le bouton s’agrandit doucement et change de couleur d’arrière-plan pour fournir un retour visuel. Le composant utilise uniquement les classes CSS Tailwind, sans JavaScript requis.