Retour en haut de la page Composant du bouton
Un composant de bouton réactif « Retour en haut » conçu avec les principes de conception matérielle, les couleurs sourdes et la prise en charge du mode sombre, adapté aux blogs ou aux sites Web de consommation de contenu.
HTML Code
<div class="fixed bottom-4 right-4 z-50">
<button
onclick="window.scrollTo({top: 0, behavior: 'smooth'});"
class="hidden md:flex items-center justify-center w-12 h-12 rounded-full shadow-lg bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200
hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500
transition-all duration-300 ease-in-out transform hover:scale-110"
aria-label="Back to top"
>
<svg
class="w-6 h-6"
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 de la page Composant du bouton
Un bouton réactif « Retour en haut » avec un design artistique à l’aquarelle, une palette de couleurs d’automne et une prise en charge du mode sombre, adapté aux sites de blog/contenu.
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 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.