Eckklammern

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

bracketcorner-markrectangleoutlinehover-expand

CSS

.btn-151 {
  position: relative;
  font: 600 14px/1 system-ui,sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #111827;
  background: transparent;
  border: 0;
  padding: 14px 28px;
  cursor: pointer;
  transition: color .2s
}
.btn-151::before,.btn-151::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #111827;
  transition: width .25s,height .25s,border-color .25s
}
.btn-151::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0
}
.btn-151::after {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0
}
.btn-151:hover::before,.btn-151:hover::after {
  width: 100%;
  height: 100%
}
.btn-151:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 4px
}
.btn-151:active {
  color: #2563eb
}
.btn-151:active::before,.btn-151:active::after {
  border-color: #2563eb
}

HTML

<button class="btn-151">Select</button>

Prompt

Ein rahmenloser Button in Versalien, 14px semibold (#111827 Text, 0.06em Laufweite, 14px mal 28px Padding), markiert nur durch zwei 12px große L-förmige Eckklammern, 2px stark, oben links und unten rechts. Beim Hover wachsen beide Klammern auf volle Breite und Höhe, treffen sich und bilden ein komplettes Rechteck, 250ms. Active färbt Text und Klammern blau #2563eb. Focus: 2px dunkle Outline mit 4px Offset.

Eckklammern

Gleiches Regal