Neumorphic Button

snippet.publishedOn August 17, 2025 Intermediate

A soft UI button with neumorphic design, creating a subtle 3D effect that appears to extrude from the background.

#button #neumorphism #soft-ui #3d-effect #design

Live Preview

Code Implementation

HTML

<button class="neumorphic-btn">
  <span class="btn-text">Press Me</span>
</button>

CSS

.neumorphic-btn {
  padding: 16px 32px;
  background: #e0e0e0;
  color: #616161;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow:  8px 8px 16px #b8b8b8, 
              -8px -8px 16px #ffffff;
  transition: all 0.3s ease;
}

.neumorphic-btn:hover {
  box-shadow:  6px 6px 12px #b8b8b8, 
              -6px -6px 12px #ffffff;
}

.neumorphic-btn:active {
  box-shadow: inset 6px 6px 12px #b8b8b8, 
              inset -6px -6px 12px #ffffff;
  transform: translateY(2px);
}

/* Dark mode version */
@media (prefers-color-scheme: dark) {
  .neumorphic-btn {
    background: #121212;
    color: #e0e0e0;
    box-shadow:  8px 8px 16px #000000, 
                -8px -8px 16px #2a2a2a;
  }
  
  .neumorphic-btn:hover {
    box-shadow:  6px 6px 12px #000000, 
                -6px -6px 12px #2a2a2a;
  }
  
  .neumorphic-btn:active {
    box-shadow: inset 6px 6px 12px #000000, 
                inset -6px -6px 12px #2a2a2a;
  }
}