Retour en haut du bouton - Conception 3D
Un bouton Retour en haut avec un design 3D, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.
HTML Code
<div class="fixed bottom-4 right-4 group">
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg
transform transition-transform duration-300
group-hover:scale-110 group-active:scale-90
dark:bg-blue-800 dark:shadow-xl dark:group-hover:scale-110 dark:group-active:scale-90
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
</svg>
</button>
</div>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 du bouton
Un bouton simple et élégant de retour en haut qui apparaît fixe dans le coin inférieur droit de l’écran. Dispose d’une palette de couleurs pastel subtile et de micro-interactions fluides. Le bouton comprend un design réactif avec prise en charge intégrée du mode sombre. Lorsqu’il est survolé, le bouton s’agrandit doucement et change de couleur d’arrière-plan pour fournir un retour visuel. Le composant utilise uniquement les classes CSS Tailwind, sans JavaScript requis.
Brutalisme Retour en haut Bouton
Composant de bouton avec le style Brutalisme, la palette de couleurs triadique et la complexité complexe. Conception réactive avec prise en charge du thème sombre. Pas de JavaScript.