Composants Retour en haut du bouton Retour en haut de la page Composant du bouton

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.

Aperçu

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 composant de bouton réactif 'Back to Top' pour la documentation/les sites wiki, inspiré du design de Memphis avec une palette de couleurs violette/violette. Inclut la prise en charge du mode sombre et une apparence complexe et interactive.

Ouvrir

Retour en haut de la page Composant du bouton

Un composant de bouton de retour en haut réactif avec un design Glassmorphism, une palette de couleurs de tons de terre et des interactions complexes, adapté à un tableau de bord.

Ouvrir

Brutalism_Earth_Tone_Back_To_Top_Button

Un bouton « Back to Top » d’inspiration brutaliste avec des tons de terre, conçu pour les blogs/sites de contenu. Il est modérément complexe, réactif et prend en charge le mode sombre. Le bouton présente un design très contrasté et une esthétique légèrement grossière.

Ouvrir