Pegatina inclinada

Pegatina inclinada: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

stickerbadgerotationroundedwhite-edge

CSS

.btn-156 {
  font: 800 15px/1 system-ui,sans-serif;
  color: #fff;
  background: #f43f5e;
  border: 4px solid #fff;
  border-radius: 14px;
  padding: 11px 22px;
  cursor: pointer;
  transform: rotate(-6deg);
  box-shadow: 0 2px 0 #00000022,0 6px 14px -4px #0004;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),background .2s
}
.btn-156:hover {
  transform: rotate(3deg) scale(1.08);
  background: #e11d48
}
.btn-156:focus-visible {
  outline: 2px solid #f43f5e;
  outline-offset: 4px
}
.btn-156:active {
  transform: rotate(0) scale(1);
  box-shadow: 0 1px 0 #00000022
}

HTML

<button class="btn-156">Fresh</button>

Prompt

Un botón tipo pegatina: relleno rosa #f43f5e con borde blanco grueso de 4px y radio 14px, texto blanco 15px extra-bold, padding 11px por 22px, inclinado -6 grados con sombra de papel recortado (una línea oscura plana de 2px más una sombra suave de 14px). En hover salta a +3 grados con escala 1.08 (easing con sobreimpulso) y se oscurece a #e11d48; en active se endereza. Focus con outline rosa de 2px y offset 4px.

Pegatina inclinada

Misma estantería