Design for AI

Soft pressed

Soft pressed: a CSS button. Copy the rules, or the prompt that rebuilds it.

neumorphicsoft-uiinsetrounded

CSS
.btn-039 {
  font: 600 14px/1 system-ui,sans-serif;
  color: #3d4a5c;
  background: #e0e5ec;
  border: 0;
  border-radius: 14px;
  padding: 14px 28px;
  cursor: pointer;
  box-shadow: inset 5px 5px 10px #b8bec7,inset -5px -5px 10px #fff;
  transition: box-shadow .15s,color .15s
}
.btn-039:hover {
  color: #1f2937
}
.btn-039:focus-visible {
  outline: 2px solid #3d4a5c;
  outline-offset: 3px
}
.btn-039:active {
  box-shadow: inset 7px 7px 14px #b8bec7,inset -7px -7px 14px #fff
}
HTML
<div style="background:#e0e5ec;padding:28px"><button class="btn-039">Pause</button></div>
Prompt

A neumorphic button that sits sunk into the surface: #e0e5ec background with inset shadows (5px 5px 10px #b8bec7 and -5px -5px 10px white), slate text at 14px semibold, 14px radius, 14px by 28px padding. Hover darkens the text; active deepens the inset to 7px/14px. Focus outline 2px slate.

Same shelf