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 réactif de retour en haut conçu avec un effet de glassmorphism, adapté aux sites Web d’entreprise professionnels. Il présente une mise en page simple avec un minimum d’éléments et fonctionne bien dans les thèmes clairs et sombres.
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 Bouton - Brutalisme
Un composant de bouton brutaliste « Back to Top » pour un portfolio, avec une palette de couleurs triadique et un design simple. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.