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