Design for AI

Rahmen-Trace

Rahmen-Trace: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein Text-Button in Versalien (14px semibold, 0.06em Spacing, #0f172a, keine Box, 14px mal 26px Padding), dessen 2px Rahmen sich beim Hover selbst zeichnet: obere und linke Kante wachsen aus der oberen linken Ecke, untere und rechte aus der unteren rechten, erst Breite dann Höhe (je 200ms), bis ein volles Rechteck steht. Active graut den Text. Fokus-Outline 2px Dunkel.

Gleiches Regal