Design for AI

Brutalista a rayas

Brutalista a rayas: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

brutalistpatternstripessquare

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
}
HTML
<button class="btn-048">Buy ticket</button>
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.

Misma estantería