Retour en haut du bouton
Un bouton simple et élégant de retour en haut qui apparaît fixe dans le coin inférieur droit de l’écran. Dispose d’une palette de couleurs pastel subtile et de micro-interactions fluides. Le bouton comprend un design réactif avec prise en charge intégrée du mode sombre. Lorsqu’il est survolé, le bouton s’agrandit doucement et change de couleur d’arrière-plan pour fournir un retour visuel. Le composant utilise uniquement les classes CSS Tailwind, sans JavaScript requis.
HTML Code
<button onclick="window.scrollTo({top: 0, behavior: 'smooth'})" class="fixed bottom-6 right-6 p-3 rounded-full bg-pink-200 dark:bg-pink-900 text-pink-700 dark:text-pink-200 shadow-md hover:bg-pink-300 dark:hover:bg-pink-800 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-700 hover:scale-110 focus:scale-110 transition-all duration-300 group">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform group-hover:-translate-y-1 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
<span class="sr-only">Back to top</span>
</button>Composants associés
Retour en haut du bouton
Un bouton Material Design Back to Top qui apparaît lorsque l’utilisateur fait défiler la page. Il comprend la prise en charge du mode sombre et un défilement fluide.
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.
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.