Trazado de borde

Trazado de borde: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

border-drawoutlinecornersanimated-border

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
}

HTML

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

Prompt

Un botón de texto en mayúsculas (14px semibold, 0.06em de espaciado, #0f172a, sin caja, padding de 14px por 26px) cuyo borde de 2px se dibuja solo al pasar el cursor: los cantos superior e izquierdo crecen desde la esquina superior izquierda y los cantos inferior y derecho desde la inferior derecha, primero el ancho y luego el alto (200ms cada uno), hasta que aparece un rectángulo completo. En active el texto se agrisa. Outline de foco de 2px oscuro.

Trazado de borde

Misma estantería