Bouton Neumorphic Retour en haut (Bleu océan)
Un simple composant de bouton « Retour en haut » conçu avec un style neumorphique, utilisant des tons bleu océan, adapté aux plateformes musicales/audio. Il est entièrement réactif et prend en charge le mode sombre.
HTML Code
<div class="flex justify-center items-center h-screen bg-blue-100 dark:bg-gray-900 duration-300">
<!-- Component Wrapper -->
<a href="#top" class="
relative z-10
p-4 md:p-5
rounded-full
shadow-neumorphic-light-blue dark:shadow-neumorphic-dark-blue
text-blue-600 dark:text-blue-300
hover:shadow-neumorphic-light-blue-pressed dark:hover:shadow-neumorphic-dark-blue-pressed
active:shadow-neumorphic-light-blue-pressed dark:active:shadow-neumorphic-dark-blue-pressed
transition-all duration-300 ease-in-out
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75
group
">
<svg class="w-8 h-8 md:w-10 md:h-10 rotate-180 transition-transform duration-300 group-hover:-translate-y-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
<!-- Hidden arrow for hover effect (optional, uncomment to enable) -->
<!-- <svg class="absolute w-8 h-8 md:w-10 md:h-10 text-blue-400 dark:text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 inset-0 m-auto -translate-y-2 group-hover:translate-y-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg> -->
</a>
<!-- Tailwind JIT custom utility classes for neumorphism (add these to your tailwind.config.js) -->
<style>
/* Light mode */
.shadow-neumorphic-light-blue {
box-shadow: 6px 6px 12px #98b3d6, -6px -6px 12px #cbe7ff;
}
.shadow-neumorphic-light-blue-pressed {
box-shadow: inset 4px 4px 8px #98b3d6, inset -4px -4px 8px #cbe7ff;
}
/* Dark mode */
.dark .shadow-neumorphic-dark-blue {
box-shadow: 6px 6px 12px #181c2f, -6px -6px 12px #263456;
}
.dark .shadow-neumorphic-dark-blue-pressed {
box-shadow: inset 4px 4px 8px #181c2f, inset -4px -4px 8px #263456;
}
</style>
</div>Composants associés
Retour en haut de la page Composant du bouton
Un composant de bouton « Retour en haut » réactif pour les sites de commerce électronique, avec un design monochrome en noir et blanc avec une couleur d’accent vive et une micro-interaction attrayante au survol. Inclut la prise en charge du mode sombre.
Art Déco Retour en haut Bouton
Un composant de bouton « Retour en haut » avec un design Art Déco, avec des motifs géométriques et des couleurs chaudes de coucher de soleil, adapté aux plateformes de rencontres/sociales. Il comprend un style riche et interactif et prend en charge le mode sombre.
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.