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;
}