Design for AI

Candy press

Candy press: a CSS button. Copy the rules, or the prompt that rebuilds it.

3dpress-downroundedbottom-edge

CSS
.btn-051 {
  font: 700 16px/1 system-ui,sans-serif;
  color: #fff;
  background: #22c55e;
  border: 0;
  border-radius: 12px;
  padding: 14px 32px;
  cursor: pointer;
  box-shadow: 0 6px 0 #15803d,0 8px 12px rgba(0,0,0,.2);
  transition: transform .08s,box-shadow .08s
}
.btn-051:hover {
  background: #26d162
}
.btn-051:focus-visible {
  outline: 3px solid #15803d;
  outline-offset: 3px
}
.btn-051:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 #15803d,0 1px 3px rgba(0,0,0,.2)
}
HTML
<button class="btn-051">Play</button>
Prompt

A 3D candy-style button: green #22c55e top face, white 16px bold text, 12px radius, 14px by 32px padding, with a solid 6px darker green #15803d bottom edge (box-shadow 0 6px 0) plus a soft drop shadow. Hover lightens slightly; on press the button moves down 6px and the edge collapses to zero. Focus outline 3px dark green.

Same shelf