Neumorphism (or soft UI) is a design trend that creates the illusion of elements being physically extruded from or pressed into their surrounding background. In this snippet, we build a button that mimics realistic physical elevation and indentation during hover and active (click) states, relying solely on HTML and CSS.

Implementation Code

Copy the code below and integrate it into your project.

<!-- 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;
  /* Normal state: Outer shadow to create extrusion */
  box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6), 
             -9px -9px 16px rgba(255, 255, 255, 0.5);
}

.neumorphism-btn:hover {
  /* Hover state: Smaller shadow to indicate it will be pressed */
  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 {
  /* Active (click) state: Inner shadow to simulate indentation */
  box-shadow: inset 6px 6px 10px 0 rgba(163, 177, 198, 0.6), 
              inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
}

Explanation