Retour en haut de la page Composant du bouton
Un composant de bouton « Retour en haut » réactif pour les sites de commerce électronique, avec un design monochrome en noir et blanc avec une couleur d’accent vive et une micro-interaction attrayante au survol. Inclut la prise en charge du mode sombre.
HTML Code
<div class="fixed bottom-4 right-4 z-50">
<!-- Back to Top Button -->
<a href="#top" aria-label="Scroll back to top of page" class="group outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 rounded-full">
<button class="relative w-12 h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 flex items-center justify-center bg-white dark:bg-gray-800 rounded-full shadow-lg transition-all duration-300 ease-in-out transform group-hover:-translate-y-1 group-focus:-translate-y-1 group-active:-translate-y-1 group-hover:scale-105 group-focus:scale-105 group-active:scale-105 overflow-hidden border border-gray-200 dark:border-gray-700">
<!-- Background accent on hover -->
<div class="absolute inset-0 bg-purple-500 rounded-full scale-0 group-hover:scale-100 group-focus:scale-100 group-active:scale-100 transition-transform duration-300 ease-out"></div>
<!-- SVG Icon -->
<svg class="relative w-6 h-6 md:w-7 md:h-7 lg:w-8 lg:h-8 text-gray-800 dark:text-white group-hover:text-white dark:group-hover:text-white transition-colors duration-300 ease-in-out" 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>
</a>
</div>Composants associés
Retour en haut de la page Composant du bouton
Un bouton de retour en haut réactif conçu avec des micro-interactions et des couleurs vives, adapté à une interface de tableau de bord avec prise en charge du mode sombre.
Retour en haut du bouton
Bouton Retour en haut pour le commerce électronique, avec un design vibrant en mode sombre.
Skeuomorphic Retour en haut du bouton
Un bouton skeuomorphe « Retour en haut » conçu avec des neutres chauds pour les sites Web d’entreprise, avec un design réactif et une prise en charge du mode sombre. Le bouton a un effet de pression 3D.