Píldora neobrutal rosa

Píldora neobrutal rosa: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

CSS

.btn-045 {
  font: 800 14px/1 system-ui,sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #000;
  background: #f9a8d4;
  border: 2px solid #000;
  border-radius: 999px;
  padding: 12px 24px;
  cursor: pointer;
  box-shadow: 4px 4px 0 #000;
  transition: transform .1s,box-shadow .1s
}
.btn-045:hover {
  background: #f472b6
}
.btn-045:focus-visible {
  outline: 3px solid #000;
  outline-offset: 4px
}
.btn-045:active {
  transform: translate(4px,4px);
  box-shadow: 0 0 0 #000
}

HTML

<button class="btn-045">Subscribe</button>

Prompt

Una píldora neobrutalista: relleno rosa #f9a8d4, borde negro de 2px, totalmente redondeada, texto negro en mayúsculas de 14px extra bold con 0.04em de espaciado, padding de 12px por 24px, sombra negra dura 4px 4px. Al pasar el cursor el rosa se intensifica a #f472b6; en active se traslada 4px abajo a la derecha y elimina la sombra. Outline de foco de 3px negro con offset de 4px.

Píldora neobrutal rosa

Misma estantería