Design for AICorner brackets
Corner brackets: a CSS button. Copy the rules, or the prompt that rebuilds it.
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
A borderless uppercase 14px semibold button (#111827 text, 0.06em tracking, 14px by 28px padding) marked only by two 12px L-shaped corner brackets, 2px thick, at the top-left and bottom-right. On hover both brackets grow to the full width and height so they meet and form a complete rectangle, 250ms. Active colours text and brackets blue #2563eb. Focus 2px dark outline offset 4px.