Bracket text wrap

Bracket text wrap: a CSS button. Copy the rules, or the prompt that rebuilds it.

bracketcorner-marktextminimalslide-in

CSS

.btn-153 {
  position: relative;
  font: 500 15px/1 ui-monospace,Menlo,monospace;
  color: #334155;
  background: transparent;
  border: 0;
  padding: 10px 22px;
  cursor: pointer;
  transition: color .2s
}
.btn-153::before,.btn-153::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  color: #0ea5e9;
  font-weight: 700;
  transition: opacity .2s,left .2s,right .2s
}
.btn-153::before {
  content: "[";
  left: 14px
}
.btn-153::after {
  content: "]";
  right: 14px
}
.btn-153:hover {
  color: #0f172a
}
.btn-153:hover::before {
  opacity: 1;
  left: 4px
}
.btn-153:hover::after {
  opacity: 1;
  right: 4px
}
.btn-153:focus-visible {
  outline: 2px solid #0ea5e9;
  outline-offset: 2px
}
.btn-153:active {
  color: #0ea5e9
}

HTML

<button class="btn-153">Docs</button>

Prompt

A minimal text button in monospace 15px #334155 with 10px by 22px padding and no background or border. On hover a cyan #0ea5e9 opening and closing square bracket slide in from the centre to 4px from each edge while fading in, 200ms, and the text darkens. Active turns the text cyan. Focus 2px cyan outline.

Bracket text wrap

Same shelf