Retour en haut de la page Composant du bouton
Un composant de bouton Retour en haut de style brutaliste utilisant Tailwind CSS. Ce composant a un design audacieux et contrasté et prend en charge les effets réactifs et le thème sombre.
HTML Code
<div class="fixed bottom-5 right-5">
<a href="#top" class="bg-white dark:bg-gray-800 text-black dark:text-white p-4 rounded-lg shadow-lg font-bold transition-all duration-300 ease-in-out transform hover:scale-105 hover:bg-gray-300 dark:hover:bg-gray-700">
<span class="text-xl">⬆️</span>
</a>
</div>
<style>
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
/* General styles */
body {
font-family: 'Courier New', Courier, monospace;
background-color: white;
color: black;
transition: background-color 0.5s, color 0.5s;
}
</style>Composants associés
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.
Neumorphe Retour en haut Bouton
Un bouton neumorphe « Back to Top » pour le e-commerce, offrant un design d’interface utilisateur subtil et doux qui se fond dans l’arrière-plan à l’aide d’ombres délicates. Il présente des couleurs analogues pour un look harmonieux, une mise en page simple et un design réactif avec prise en charge du thème sombre, idéal pour les expériences d’achat en ligne.
Retour en haut de la page Composant du bouton
Un composant de bouton « Retour en haut » réactif conçu pour le commerce électronique, avec une palette de couleurs vives sur un fond sombre. Il comprend un effet de survol subtil et assure une visibilité sur toutes les tailles d’écran avec la prise en charge du mode sombre.