# Chanfro cromado (B 056)

Categoria: Botões  
Tags: 3d, bevel, chrome, retro  
Página: https://designforai.dev/pt/snippet/btn-056

## Prompt

Um botão chanfrado clássico: gradiente vertical de #f9fafb a #d1d5db, borda de 1px #6b7280, raio de 4px, realce interno branco de 1px no canto superior esquerdo e sombra interna de 1px #9ca3af no inferior direito, sombra externa pequena, texto cinza escuro de 14px semibold, padding de 11px por 24px. No hover clareia; no active o gradiente inverte e as arestas do chanfro trocam de lado. Outline de foco de 2px pontilhado.

## HTML

```html
<button class="btn-056">Apply</button>
```

## CSS

```css
.btn-056 {
  font: 600 14px/1 system-ui,sans-serif;
  color: #1f2937;
  background: linear-gradient(180deg,#f9fafb,#d1d5db);
  border: 1px solid #6b7280;
  border-radius: 4px;
  padding: 11px 24px;
  cursor: pointer;
  box-shadow: inset 1px 1px 0 #fff,inset -1px -1px 0 #9ca3af,0 2px 3px rgba(0,0,0,.2);
  transition: background .1s
}
.btn-056:hover {
  background: linear-gradient(180deg,#fff,#e5e7eb)
}
.btn-056:focus-visible {
  outline: 2px dotted #1f2937;
  outline-offset: 2px
}
.btn-056:active {
  background: linear-gradient(180deg,#d1d5db,#f3f4f6);
  box-shadow: inset 1px 1px 0 #9ca3af,inset -1px -1px 0 #fff
}
```