Composants Retour en haut du bouton Bouton retour en haut

Bouton retour en haut

Un composant de bouton Retour en haut avec des micro-interactions, une palette de couleurs de terre, une mise en page simple pour les sites Web d’entreprise ; conception réactive avec prise en charge du mode sombre à l’aide de Tailwind CSS

Aperçu

HTML Code

<!-- Back to Top Button Component -->
<a href="#top" class="fixed bottom-6 right-6 flex items-center justify-center w-12 h-12 bg-emerald-700 text-white rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-500" aria-label="Back to Top">
  <span class="sr-only">Back to Top</span>
  <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/>
  </svg>
</a>

<!-- To enable smooth scrolling behavior across the page, add the `scroll-smooth` class to your `<html>` element: -->
<!-- <html class="scroll-smooth"> -->

Composants associés

Brutalisme Retour en haut Bouton

Composant de bouton avec le style Brutalisme, la palette de couleurs triadique et la complexité complexe. Conception réactive avec prise en charge du thème sombre. Pas de JavaScript.

Ouvrir

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.

Ouvrir

Retro_Back_To_Top_Button

Rétro/Vintage - Composant de bouton de retour en haut nostalgique pour la consommation de blog/contenu avec une palette de couleurs analogue. Conception complexe avec prise en charge du mode réactif et sombre.

Ouvrir