Sello de goma

Sello de goma: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón redondo de 84px tipo sello de goma: transparente con borde doble rojo #b91c1c de 3px, un anillo rojo interior de 1px a 6px hacia dentro (box-shadow), texto rojo oscuro #7f1d1d en mayúsculas, 13px extra-bold en dos líneas, inclinado -12 grados al 90% de opacidad. En hover se endereza, escala 1.05, pasa a opacidad completa y se tiñe de #fef2f2; active #fee2e2. Focus con outline rojo de 2px y offset 4px.

Sello de goma

Misma estantería