Adesivo inclinado

Adesivo inclinado: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um botão em estilo adesivo: preenchimento rosa #f43f5e com borda branca grossa de 4px e raio de 14px, texto branco 15px extra-bold, padding 11px por 22px, inclinado -6 graus com sombra de recorte de papel (uma linha escura chapada de 2px mais uma sombra suave de 14px). No hover ele salta para +3 graus em escala 1.08 (easing com overshoot) e escurece para #e11d48; no active ele endireita. Focus com outline rosa de 2px e offset de 4px.

Adesivo inclinado

Mesma prateleira