Sticker-Neigung

Sticker-Neigung: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein Button im Sticker-Stil: Rosé #f43f5e Füllung mit dickem 4px weißem Rahmen und 14px Radius, weißer 15px extra-bold Text, 11px mal 22px Padding, um -6 Grad geneigt mit einem Papierschnitt-Schatten (eine 2px flache dunkle Linie plus ein weicher 14px Drop). Beim Hover federt er auf +3 Grad bei 1.08 Skalierung (Overshoot-Easing) und dunkelt auf #e11d48 ab; Active richtet ihn gerade aus. Focus: 2px roséfarbene Outline mit 4px Offset.

Sticker-Neigung

Gleiches Regal