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
Retour en haut de la page Composant du bouton
Un bouton simple et artistique « Retour en haut » conçu pour les sites Web d’alimentation/restaurants, avec une esthétique en niveaux de gris inspirée de l’aquarelle. Il est réactif et prend en charge le mode sombre.
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.
Retour en haut de la page Composant du bouton
Un composant de bouton réactif 'Back to Top' pour la documentation/les sites wiki, inspiré du design de Memphis avec une palette de couleurs violette/violette. Inclut la prise en charge du mode sombre et une apparence complexe et interactive.