Retour en haut de la page Composant du bouton
Un bouton « Retour en haut » réactif et visuellement attrayant avec une palette de couleurs triadiques, un dégradé et des transitions fluides, adapté à un site de portfolio, y compris la prise en charge du mode sombre.
HTML Code
<div class="fixed bottom-6 right-6 z-50">
<!-- The button is initially hidden and would be revealed by JS on scroll -->
<!-- For demonstration, it's always visible here. In a real app, add a 'hidden' class by default -->
<button aria-label="Scroll to top" class="group flex h-14 w-14 items-center justify-center rounded-full shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
bg-gradient-to-br from-emerald-400 via-teal-500 to-blue-600
dark:from-emerald-600 dark:via-teal-700 dark:to-blue-800">
<svg class="h-8 w-8 text-white transition-transform duration-300 ease-in-out group-hover:-translate-y-1" 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 « 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.
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.
Retour en haut du bouton
Un simple bouton Retour en haut avec un design Glassmorphism et une palette de couleurs monochromatique pour les sites Web de commerce électronique.