Design for AI

Sticker tilt

Sticker tilt: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

A sticker-style badge button: rose #f43f5e fill with a thick 4px white border and 14px radius, white 15px extra-bold text, 11px by 22px padding, tilted -6 degrees with a paper-cut shadow (a 2px flat dark line plus a soft 14px drop). On hover it springs to +3 degrees at 1.08 scale (overshoot easing) and darkens to #e11d48; active levels out. Focus 2px rose outline offset 4px.

Same shelf