# Border trace (B 067)

Category: Buttons  
Tags: border-draw, outline, corners, animated-border  
Page: https://designforai.dev/snippet/btn-067

## Prompt

An uppercase text button (14px semibold, 0.06em spacing, #0f172a, no box, 14px by 26px padding) whose 2px border draws itself on hover: the top and left edges grow from the top-left corner and the bottom and right edges from the bottom-right, width first then height (200ms each), until a full rectangle appears. Active greys the text. Focus outline 2px dark.

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