Neumorphism Button

A soft UI button with neumorphism design and pressed state effect.

button
neumorphism
soft-ui

Preview

Loading preview...

HTML

<div style="background: #e0e5ec; padding: 40px; border-radius: 8px;">
  <button class="neu-button">Neumorphism</button>
</div>

CSS

.neu-button {
  padding: 16px 32px;
  background: #e0e5ec;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 
    8px 8px 16px #c8d0e7,
    -8px -8px 16px #ffffff;
}
.neu-button:hover {
  box-shadow: 
    6px 6px 12px #c8d0e7,
    -6px -6px 12px #ffffff;
}
.neu-button:active {
  box-shadow: 
    inset 4px 4px 8px #c8d0e7,
    inset -4px -4px 8px #ffffff;
}

© 2025 AnyCSS. All rights reserved.