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 conçu pour le commerce électronique, avec une palette de couleurs vives sur un fond sombre. Il comprend un effet de survol subtil et assure une visibilité sur toutes les tailles d’écran avec la prise en charge du mode sombre.

Aperçu

HTML Code

<div class="fixed bottom-4 right-4 z-50">
  <a href="#top" class="group block p-3 rounded-full bg-gradient-to-br from-purple-600 to-indigo-500 shadow-lg transition-all duration-300 ease-in-out hover:from-purple-700 hover:to-indigo-600 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800">
    <svg class="w-6 h-6 text-white transform transition-transform duration-300 ease-in-out group-hover:-translate-y-1" 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>
    <span class="sr-only">Back to Top</span>
  </a>
</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.

Ouvrir

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.

Ouvrir

Retour en haut de la page Composant du bouton

Un bouton « Retour en haut » réactif qui suit les principes de conception matérielle, prenant en charge le mode sombre avec Tailwind CSS pour le style et les effets réactifs.

Ouvrir