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