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.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<a href="#" class="back-to-top-button relative p-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center transition-all duration-300 hover:shadow-neumorphic-light-hover dark:hover:shadow-neumorphic-dark-hover"
aria-label="Back to top">
<svg class="w-6 h-6 text-indigo-600 dark:text-purple-400" 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>
</a>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 8px 8px 16px #cbced1, -8px -8px 16px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #2e2e2e;
}
.shadow-neumorphic-light-hover {
box-shadow: inset 6px 6px 12px #cbced1, inset -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark-hover {
box-shadow: inset 6px 6px 12px #1a1a1a, inset -6px -6px 12px #2e2e2e;
}
</style>Composants associés
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.
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.
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.