Bouton Neumorphism

Le Neumorphism (ou soft UI) est un style visuel qui donne l’illusion que les éléments sont extrudés ou enfoncés directement dans l’arrière-plan. Dans cet extrait, nous utilisons uniquement du HTML et du CSS pour créer un bouton présentant un relief très réaliste, qui réagit de manière fluide au survol (hover) et au clic (active).

Code

Copiez et collez le code ci-dessous pour l’intégrer à votre projet.

<!-- HTML -->
<div class="neumorphism-wrapper">
  <button class="neumorphism-btn">Neumorphism</button>
</div>

/* CSS */
.neumorphism-wrapper {
  background-color: #e0e5ec;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.neumorphism-btn {
  background-color: #e0e5ec;
  color: #4a5568;
  border: none;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  /* État normal : ajoute une ombre extérieure pour faire ressortir */
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), 
             -9px -9px 16px rgba(255, 255, 255, 0.5);
}

.neumorphism-btn:hover {
  /* État survol : réduit légèrement l'ombre pour donner l'impression qu'il va être enfoncé */
  box-shadow: 5px 5px 10px rgba(163, 177, 198, 0.6), 
             -5px -5px 10px rgba(255, 255, 255, 0.5);
  color: #2d3748;
}

.neumorphism-btn:active {
  /* État actif (clic) : ajoute une ombre intérieure pour simuler l'enfoncement */
  box-shadow: inset 6px 6px 10px 0 rgba(163, 177, 198, 0.6), 
              inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
}

Explication

Harmonisation des couleurs : La clé du Neumorphism réside dans l’utilisation d’une couleur d’arrière-plan identique pour l’élément et son conteneur (ici, #e0e5ec).
Jeu de double ombre (box-shadow) : L’effet tridimensionnel est obtenu en combinant une ombre claire (blanchâtre) en haut à gauche, simulant la source de lumière, et une ombre plus sombre en bas à droite.
État actif (clic) : L’utilisation du mot-clé inset dans la propriété box-shadow inverse l’effet, créant ainsi l’illusion que le bouton est physiquement enfoncé.