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.
HTML Code
<div class="fixed bottom-5 right-5 z-50">
<button class="bg-blue-500 text-white rounded-full p-2 shadow-lg transition-transform transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:shadow-md dark:focus:ring-blue-300">
<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="M12 4v16m0 0L8 16m4 4l4-4" />
</svg>
</button>
</div>
<style>
/* Tailwind dark mode support */
@media (prefers-color-scheme: dark) {
.bg-blue-500 { background-color: #3b82f6; }
.bg-blue-700 { background-color: #2563eb; }
.text-white { color: #ffffff; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.dark .shadow-md { box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); }
}
</style>Composants associés
Brutalisme Retour en haut de la page
Un composant de bouton brutaliste de retour en haut utilisant des couleurs en niveaux de gris et Tailwind CSS. Il est réactif et prend en charge le mode sombre.
Retour en haut du bouton
Un simple bouton Retour en haut avec un design Glassmorphism et une palette de couleurs monochromatique pour les sites Web de commerce électronique.
Retour en haut de la page Composant du bouton
Un composant de bouton Back to Top minimaliste et plat pour les tableaux de bord, avec une palette de couleurs monochromatiques. Il est modérément complexe avec des fonctionnalités interactives, un design réactif et une prise en charge du thème sombre, construit uniquement avec HTML et Tailwind CSS.