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.
HTML Code
<div class="fixed bottom-6 right-6">
<a href="#top" class="group block">
<button class="relative flex items-center justify-center w-16 h-16 bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-full shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-teal-500 dark:focus:ring-teal-400 focus:ring-opacity-70">
<svg class="w-8 h-8 text-gray-800 dark:text-gray-200 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="absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-full opacity-0 group-hover:opacity-100 group-hover:translate-y-1/2 px-3 py-1 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 text-sm font-semibold rounded-md whitespace-nowrap transition-all duration-300 ease-in-out">
Back to Top
</span>
</button>
</a>
</div>
<div class="min-h-screen bg-gradient-to-br from-stone-100 via-stone-200 to-stone-300 dark:from-stone-800 dark:via-stone-900 dark:to-black flex flex-col items-center justify-center p-8">
<h1 id="top" class="text-5xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">Dashboard Overview</h1>
<p class="text-lg text-gray-700 dark:text-gray-300 max-w-2xl text-center mb-12">
Scroll down to see the
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.
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.
Brutaliste Retour en haut Bouton
Un bouton brutaliste de retour en haut en Tailwind CSS, avec un contraste élevé, une typographie audacieuse et des bords nets. Comprend un dimensionnement réactif et la prise en charge du mode sombre.