Retour en haut du bouton
Un bouton minimaliste « Back to Top » avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="fixed bottom-5 right-5 z-50">
<a href="#" class="flex items-center justify-center w-12 h-12 bg-blue-500 text-white rounded-full shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</a>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-blue-500 {
background-color: #3b82f6;
}
.hover\:bg-blue-600:hover {
background-color: #2563eb;
}
}
</style>Composants associés
Brutalism_Earth_Tone_Back_To_Top_Button
Un bouton « Back to Top » d’inspiration brutaliste avec des tons de terre, conçu pour les blogs/sites de contenu. Il est modérément complexe, réactif et prend en charge le mode sombre. Le bouton présente un design très contrasté et une esthétique légèrement grossière.
Skeuomorphic Retour en haut du bouton
Un bouton skeuomorphe « Retour en haut » conçu avec des neutres chauds pour les sites Web d’entreprise, avec un design réactif et une prise en charge du mode sombre. Le bouton a un effet de pression 3D.
Retour en haut du bouton
Un composant de bouton Retour en haut de la page pour les sites Web de commerce électronique, utilisant une palette de couleurs en niveaux de gris et un design réactif avec prise en charge du thème sombre.