# Tecla de teclado (B 052)

Categoria: Botões  
Tags: 3d, press-down, keyboard, square  
Página: https://designforai.dev/pt/snippet/btn-052

## Prompt

Um botão em forma de tecla: gradiente vertical de branco para #f3f4f6, borda de 1px #d1d5db, raio de 6px, texto cinza #374151 em 13px semibold, padding de 10px por 18px, uma aresta inferior sólida de 3px #9ca3af e uma sombra pequena. Ao pressionar desce 3px e a aresta desaparece. Outline de foco de 2px cinza.

## HTML

```html
<button class="btn-052">Enter</button>
```

## CSS

```css
.btn-052 {
  font: 600 13px/1 system-ui,sans-serif;
  color: #374151;
  background: linear-gradient(180deg,#fff,#f3f4f6);
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
  box-shadow: 0 3px 0 #9ca3af,0 4px 6px rgba(0,0,0,.15);
  transition: transform .06s,box-shadow .06s
}
.btn-052:hover {
  background: #fff
}
.btn-052:focus-visible {
  outline: 2px solid #374151;
  outline-offset: 3px
}
.btn-052:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 #9ca3af,0 1px 2px rgba(0,0,0,.15)
}
```