Retour en haut de la page Composant du bouton
Un composant de bouton « Retour en haut » réactif avec un design inspiré du papier/de l’impression, une palette de couleurs triadique et des éléments visuels complexes, adapté aux sites de commerce électronique. 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="Back to top" class="group relative flex items-center justify-center p-2 sm:p-3 bg-indigo-500 hover:bg-indigo-600 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:bg-emerald-600 dark:hover:bg-emerald-700 dark:focus:ring-emerald-800 rounded-full shadow-lg transition-all duration-300 ease-in-out transform hover:scale-110 active:scale-95 overflow-hidden border-2 border-indigo-700 dark:border-emerald-800 animate-bounce-slow">
<!-- Paper Fold Effect - Top Right -->
<div class="absolute top-0 right-0 w-0 h-0 border-t-[10px] border-l-[10px] sm:border-t-[15px] sm:border-l-[15px] border-solid border-transparent border-t-indigo-700 dark:border-t-emerald-800 transform rotate-45 translate-x-[4px] -translate-y-[4px] sm:translate-x-[6px] sm:-translate-y-[6px] group-hover:scale-125 transition-transform duration-300"></div>
<div class="absolute top-0 right-0 w-0 h-0 border-t-[10px] border-l-[10px] sm:border-t-[15px] sm:border-l-[15px] border-solid border-transparent border-t-white dark:border-t-gray-900 opacity-20 transform rotate-45 translate-x-[6px] -translate-y-[6px] sm:translate-x-[9px] sm:-translate-y-[9px] group-hover:opacity-30 transition-opacity duration-300"></div>
<!-- Print Lines Texture -->
<div class="absolute inset-0 bg-[length:16px_16px] opacity-10 dark:opacity-15" style="background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(255,255,255,0.1) 1px, rgba(255,255,255,0.1) 2px);"></div>
<div class="absolute inset-0 bg-[length:16px_16px] opacity-10 dark:opacity-15" style="background-image: repeating-linear-gradient(-45deg, transparent, transparent 1px, rgba(0,0,0,0.1) 1px, rgba(0,0,0,0.1) 2px);"></div>
<!-- Inner Shadow for depth -->
<div class="absolute inset-0 rounded-full shadow-[inset_0_0_8px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_0_8px_rgba(0,0,0,0.5)]"></div>
<!-- Icon with subtle 3D effect -->
<svg class="h-6 w-6 sm:h-8 sm:w-8 text-white dark:text-gray-900 filter drop-shadow-[0_1px_1px_rgba(0,0,0,0.4)] dark:drop-shadow-[0_1px_1px_rgba(255,255,255,0.1)] transition-transform duration-300 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>
<!-- Subtle shine effect on hover -->
<div class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="background: radial-gradient(circle at 50% 0, rgba(255,255,255,0.3) 0%, transparent 70%);"></div>
<!-- Hidden text for screen readers (optional, could be replaced by aria-label) -->
<span class="sr-only">Back to Top</span>
</a>
</div>
<!-- Just for demonstration purposes to show the button in action -->
<!-- Add a large div to allow scrolling -->
<div id="top" class="min-h-[200vh] bg-neutral-100 dark:bg-gray-800 p-8">
<h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">Scroll Down to See the Button</h1>
<p class="text-gray-700 dark:text-gray-300">This is placeholder content to make the page scrollable.</p>
<div class="h-[140vh] flex items-end justify-center">
<p class="text-gray-700 dark:text-gray-300">Scroll more to truly appreciate the button's presence!</p>
</div>
</div>Composants associés
Bouton Neumorphic Retour en haut (Bleu océan)
Un simple composant de bouton « Retour en haut » conçu avec un style neumorphique, utilisant des tons bleu océan, adapté aux plateformes musicales/audio. Il est entièrement réactif et prend en charge le mode sombre.
Art Déco Retour en haut Bouton
Un composant de bouton complexe, inspiré de l’Art déco, avec des motifs géométriques et des tons luxueux Ocean/Blue, conçu pour les sites Web à but non lucratif / caritatifs. Comprend la conception réactive et la prise en charge du mode sombre.
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.