# Bala de pressionar (B 051)

Categoria: Botões  
Tags: 3d, press-down, rounded, bottom-edge  
Página: https://designforai.dev/pt/snippet/btn-051

## 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.

## HTML

```html
<button class="btn-051">Play</button>
```

## CSS

```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)
}
```