# Corchetes en esquinas (B 151)

Categoría: Botones  
Etiquetas: bracket, corner-mark, rectangle, outline, hover-expand  
Página: https://designforai.dev/es/snippet/btn-151

## Prompt

Un botón sin borde, en mayúsculas, 14px semibold (texto #111827, tracking 0.06em, padding 14px por 28px) marcado solo por dos corchetes en L de 12px, 2px de grosor, en las esquinas superior izquierda e inferior derecha. En hover ambos corchetes crecen hasta el ancho y alto completos, se encuentran y forman un rectángulo cerrado, 250ms. En active el texto y los corchetes pasan a azul #2563eb. Focus con outline oscuro de 2px y offset 4px.

## HTML

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

## CSS

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