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
Retour en haut du bouton
Un bouton minimaliste « Back to Top » avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Retour en haut de la page Composant du bouton
Un composant de bouton Back to Top minimaliste et plat pour les tableaux de bord, avec une palette de couleurs monochromatiques. Il est modérément complexe avec des fonctionnalités interactives, un design réactif et une prise en charge du thème sombre, construit uniquement avec HTML et Tailwind CSS.
Brutalisme Retour en haut de la page
Un composant de bouton brutaliste de retour en haut utilisant des couleurs en niveaux de gris et Tailwind CSS. Il est réactif et prend en charge le mode sombre.