Neumorphism Soft UI Buttons CSS (Code Snippet)

<div class="neu-container">
  <button class="neu-btn">Button</button>
  <button class="neu-btn active">Pressed</button>
  <button class="neu-btn icon">
    <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
  </button>
</div>

body {
  background-color: #e0e5ec;
}
.neu-container {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: center;
  padding: 50px;
}
.neu-btn {
  border: none;
  outline: none;
  background-color: #e0e5ec;
  padding: 15px 30px;
  border-radius: 15px;
  font-size: 1rem;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  box-shadow: 9px 9px 16px rgb(163,177,198,0.6), 
              -9px -9px 16px rgba(255,255,255, 0.5);
  transition: all 0.2s ease;
}
.neu-btn:hover {
  transform: translateY(-2px);
}
.neu-btn:active, .neu-btn.active {
  box-shadow: inset 6px 6px 10px 0 rgba(163,177,198, 0.7),
              inset -6px -6px 10px 0 rgba(255,255,255, 0.8);
  transform: translateY(0);
}
.neu-btn.icon {
  padding: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ef4444;
}

Neumorphism Soft UI Buttons CSS

Share Code Snippet