Retour en haut de la page Composant du bouton
Un bouton réactif Retour en haut conçu dans un style skeuomorphe, avec prise en charge du thème sombre et effets réactifs.
HTML Code
<div class="fixed bottom-10 right-10 z-50">
<a href="#top" class="bg-white dark:bg-gray-800 rounded-full shadow-lg p-3 transition-transform transform hover:scale-110">
<img src="https://picsum.photos/50/50?random=1" alt="Back to Top" class="w-full h-full rounded-full">
</a>
<div class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-white text-sm rounded-lg shadow-md p-2 mt-2 text-center">
Back to Top
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-white { background-color: #1f2937; }
.bg-gray-200 { background-color: #4b5563; }
.bg-gray-700 { background-color: #2d3748; }
.text-gray-800 { color: #f7fafc; }
}
</style>
Composants associés
Retour en haut de la page Composant du bouton
Un composant de bouton réactif « Retour en haut » conçu avec les principes de conception matérielle, les couleurs sourdes et la prise en charge du mode sombre, adapté aux blogs ou aux sites Web de consommation de contenu.
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.
Retour en haut du bouton
Un composant de bouton « Retour en haut » minimal et réactif avec prise en charge du mode sombre. Il apparaît après avoir fait défiler vers le bas et utilise un défilement fluide pour ramener l’utilisateur en haut de la page lorsqu’il clique dessus. Aucun JavaScript n’est utilisé pour le défilement, seulement du CSS.