Stempel-Badge

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

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

Ein runder 84px Gummistempel-Button: transparent mit 3px doppeltem roten #b91c1c Rahmen, ein innerer 1px roter Ring 6px weiter innen (box-shadow), dunkelroter #7f1d1d Versalientext 13px extra-bold auf zwei Zeilen, um -12 Grad geneigt bei 90% Deckkraft. Beim Hover richtet er sich auf, skaliert auf 1.05, wird voll deckend und tönt sich #fef2f2; Active #fee2e2. Focus: 2px rote Outline mit 4px Offset.

Stempel-Badge

Gleiches Regal