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
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.
Retour en haut de la page Composant du bouton
Un simple bouton Retour en haut conçu dans un style brutaliste à l’aide de Tailwind CSS, adapté à un site web de portfolio. Il dispose d’une palette de couleurs en niveaux de gris et d’une prise en charge du thème 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.