# Borda que se desenha (B 067)

Categoria: Botões  
Tags: border-draw, outline, corners, animated-border  
Página: https://designforai.dev/pt/snippet/btn-067

## Prompt

Um botão de texto em caixa alta (14px semibold, espaçamento de 0.06em, #0f172a, sem caixa, padding de 14px por 26px) cuja borda de 2px se desenha sozinha no hover: as arestas superior e esquerda crescem a partir do canto superior esquerdo e as inferior e direita a partir do inferior direito, primeiro a largura e depois a altura (200ms cada), até formar o retângulo completo. No active o texto fica cinza. Outline de foco de 2px escuro.

## HTML

```html
<button class="btn-067">Trace</button>
```

## CSS

```css
.btn-067 {
  position: relative;
  font: 600 14px/1 system-ui,sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0f172a;
  background: none;
  border: 0;
  padding: 14px 26px;
  cursor: pointer
}
.btn-067::before,.btn-067::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 2px solid transparent;
  transition: width .2s,height .2s .2s
}
.btn-067::before {
  top: 0;
  left: 0;
  border-top-color: #0f172a;
  border-left-color: #0f172a
}
.btn-067::after {
  bottom: 0;
  right: 0;
  border-bottom-color: #0f172a;
  border-right-color: #0f172a
}
.btn-067:hover::before,.btn-067:hover::after {
  width: calc(100% - 4px);
  height: calc(100% - 4px)
}
.btn-067:focus-visible {
  outline: 2px solid #0f172a;
  outline-offset: 4px
}
.btn-067:active {
  color: #475569
}
```