# Bracket text wrap (B 153)

Category: Buttons  
Tags: bracket, corner-mark, text, minimal, slide-in  
Page: https://designforai.dev/snippet/btn-153

## 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.

## HTML

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

## CSS

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