Bala de pressionar

Bala de pressionar: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um botão 3D estilo bala de goma: face superior verde #22c55e, texto branco de 16px bold, raio de 12px, padding de 14px por 32px, com uma aresta inferior sólida de 6px em verde mais escuro #15803d (box-shadow 0 6px 0) mais uma sombra suave. No hover clareia um pouco; ao pressionar o botão desce 6px e a aresta colapsa para zero. Outline de foco de 3px verde escuro.

Bala de pressionar

Mesma prateleira