# Brutalista a rayas (B 048)

Categoría: Botones  
Etiquetas: brutalist, pattern, stripes, square  
Página: https://designforai.dev/es/snippet/btn-048

## Prompt

Un botón brutalista: relleno blanco, borde negro de 3px, esquinas cuadradas, texto negro en mayúsculas de 14px extra bold, padding de 12px por 22px, sombra negra dura 5px 5px. Al pasar el cursor el relleno pasa a rayas diagonales a 45deg alternando 6px blanco y 6px lima #bef264; en active se mueve sobre la sombra y se rellena de lima sólido. Outline de foco de 3px negro.

## HTML

```html
<button class="btn-048">Buy ticket</button>
```

## CSS

```css
.btn-048 {
  font: 800 14px/1 system-ui,sans-serif;
  text-transform: uppercase;
  color: #000;
  background: #fff;
  border: 3px solid #000;
  border-radius: 0;
  padding: 12px 22px;
  cursor: pointer;
  box-shadow: 5px 5px 0 #000;
  transition: background .1s,transform .1s,box-shadow .1s
}
.btn-048:hover {
  background: repeating-linear-gradient(45deg,#fff 0 6px,#bef264 6px 12px)
}
.btn-048:focus-visible {
  outline: 3px solid #000;
  outline-offset: 4px
}
.btn-048:active {
  transform: translate(5px,5px);
  box-shadow: 0 0 0 #000;
  background: #bef264
}
```