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 « Retour en haut » réactif pour les sites de commerce électronique, avec un design monochrome en noir et blanc avec une couleur d’accent vive et une micro-interaction attrayante au survol. Inclut la prise en charge du mode sombre.

Aperçu

HTML Code

<div class="fixed bottom-4 right-4 z-50">
  <!-- Back to Top Button -->
  <a href="#top" aria-label="Scroll back to top of page" class="group outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 rounded-full">
    <button class="relative w-12 h-12 md:w-14 md:h-14 lg:w-16 lg:h-16 flex items-center justify-center bg-white dark:bg-gray-800 rounded-full shadow-lg transition-all duration-300 ease-in-out transform group-hover:-translate-y-1 group-focus:-translate-y-1 group-active:-translate-y-1 group-hover:scale-105 group-focus:scale-105 group-active:scale-105 overflow-hidden border border-gray-200 dark:border-gray-700">
      <!-- Background accent on hover -->
      <div class="absolute inset-0 bg-purple-500 rounded-full scale-0 group-hover:scale-100 group-focus:scale-100 group-active:scale-100 transition-transform duration-300 ease-out"></div>
      
      <!-- SVG Icon -->
      <svg class="relative w-6 h-6 md:w-7 md:h-7 lg:w-8 lg:h-8 text-gray-800 dark:text-white group-hover:text-white dark:group-hover:text-white transition-colors duration-300 ease-in-out" 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>
  </a>
</div>

Composants associés

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.

Ouvrir