Stamp badge

Stamp badge: a CSS button. Copy the rules, or the prompt that rebuilds it.

stickerbadgecirclerotationdouble-ring

CSS

.btn-158 {
  width: 84px;
  height: 84px;
  font: 800 13px/1.15 system-ui,sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #7f1d1d;
  background: transparent;
  border: 3px double #b91c1c;
  border-radius: 50%;
  cursor: pointer;
  transform: rotate(-12deg);
  box-shadow: inset 0 0 0 6px #fff,inset 0 0 0 7px #b91c1c;
  opacity: .9;
  transition: transform .3s,opacity .3s,background .3s
}
.btn-158:hover {
  transform: rotate(0) scale(1.05);
  opacity: 1;
  background: #fef2f2
}
.btn-158:focus-visible {
  outline: 2px solid #b91c1c;
  outline-offset: 4px
}
.btn-158:active {
  transform: rotate(0) scale(.98);
  background: #fee2e2
}

HTML

<button class="btn-158">100%<br>free</button>

Prompt

A round 84px rubber-stamp button: transparent with a 3px double red #b91c1c border, an inner 1px red ring 6px inside it (box-shadow), dark red #7f1d1d uppercase 13px extra-bold two-line text, tilted -12 degrees at 90% opacity. On hover it straightens, scales 1.05, goes fully opaque and tints #fef2f2; active #fee2e2. Focus 2px red outline offset 4px.

Stamp badge

Same shelf