Neumorphism Button

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

Unified Background Color: The foundational rule of neumorphism is seamless blending; ensure the button’s background color matches its parent container exactly (e.g., #e0e5ec).
Dual Shadows (box-shadow): The 3D extrusion effect is achieved by pairing a bright, whitish shadow on the top-left (simulating a light source) with a darker, contrasting shadow on the bottom-right.
Active State Interaction: Applying an inset property to the box-shadow instantly reverses the extrusion, creating a realistic, indented effect when the button is pressed.