Cinta en la esquina

Cinta en la esquina: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

stickerbadgeribbonrotationrectangle

CSS

.btn-159 {
  position: relative;
  overflow: hidden;
  font: 600 15px/1 system-ui,sans-serif;
  color: #fff;
  background: #0f172a;
  border: 0;
  border-radius: 8px;
  padding: 14px 40px 14px 24px;
  cursor: pointer;
  transition: background .2s
}
.btn-159 span {
  position: absolute;
  top: 6px;
  right: -22px;
  transform: rotate(45deg);
  font: 700 9px/1 system-ui,sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0f172a;
  background: #fbbf24;
  padding: 3px 24px;
  transition: background .2s,transform .2s
}
.btn-159:hover {
  background: #1e293b
}
.btn-159:hover span {
  background: #fde68a;
  transform: rotate(45deg) translateY(-1px)
}
.btn-159:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 3px
}
.btn-159:active {
  background: #020617
}

HTML

<button class="btn-159">Start<span>Beta</span></button>

Prompt

Un botón oscuro #0f172a, radio 8px, texto blanco 15px semibold con padding derecho extra (14px 40px 14px 24px), overflow hidden, con una pequeña cinta ámbar #fbbf24 rotada 45 grados cruzando la esquina superior derecha con el texto "BETA" en 9px, mayúsculas y color oscuro. En hover el botón aclara a #1e293b y la cinta a #fde68a; active #020617. Focus con outline ámbar de 2px.

Cinta en la esquina

Misma estantería