Retour en haut de la page Composant du bouton
Un composant de bouton « Retour en haut » réactif conçu pour le commerce électronique, avec une palette de couleurs vives sur un fond sombre. Il comprend un effet de survol subtil et assure une visibilité sur toutes les tailles d’écran avec la prise en charge du mode sombre.
HTML Code
<div class="fixed bottom-4 right-4 z-50">
<a href="#top" class="group block p-3 rounded-full bg-gradient-to-br from-purple-600 to-indigo-500 shadow-lg transition-all duration-300 ease-in-out hover:from-purple-700 hover:to-indigo-600 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800">
<svg class="w-6 h-6 text-white transform 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>
<span class="sr-only">Back to Top</span>
</a>
</div>Composants associés
Retour en haut Bouton - Brutalisme
Un composant de bouton brutaliste « Back to Top » pour un portfolio, avec une palette de couleurs triadique et un design simple. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.
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.
Retour en haut du bouton - Conception 3D
Un bouton Retour en haut avec un design 3D, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.