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
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 simple bouton Retour en haut conçu dans un style brutaliste à l’aide de Tailwind CSS, adapté à un site web de portfolio. Il dispose d’une palette de couleurs en niveaux de gris et d’une prise en charge du thème sombre.
Retour en haut du bouton
Bouton Retour en haut pour le commerce électronique, avec un design vibrant en mode sombre.