Design for AI

Soft clay raised

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

neumorphicsoft-uiraisedrounded

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

A neumorphic raised button on a #e0e5ec surface: same #e0e5ec background, slate text #3d4a5c at 14px semibold, 14px radius, 14px by 28px padding, no border, with a dark shadow 6px 6px 12px #b8bec7 to the bottom-right and a white highlight -6px -6px 12px to the top-left. Hover enlarges both shadows to 8px/16px; active inverts them to inset 4px 4px 8px so it looks pressed in. Focus outline 2px slate.

Same shelf