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.
HTML Code
<div class="fixed bottom-4 right-4 z-50">
<button aria-label="Scroll to top" class="dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200 dark:shadow-lg focus:outline-none dark:focus:ring-gray-500 rounded-full bg-gray-800 p-3 text-white shadow-md transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 active:scale-95 md:p-4 lg:p-5">
<svg class="h-6 w-6 md:h-7 md:w-7 lg:h-8 lg:w-8" 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>
</div>Composants associés
Retour en haut Bouton Minimaliste Vibrant
Un composant de bouton Retour en haut minimal et plat avec des couleurs vives, adapté à un site web de portfolio. Il inclut un design réactif et la prise en charge du mode sombre à l’aide de Tailwind CSS.
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.
Retour en haut Bouton - Material Design Pastel
Un composant de bouton réactif « Retour en haut » suivant les principes de Material Design avec une palette de couleurs pastel, adapté à un site web de portfolio. Il inclut un design réactif et la prise en charge du mode sombre à l’aide de Tailwind CSS.