Design for AI

Carimbo redondo

Carimbo redondo: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um botão redondo de 84px estilo carimbo de borracha: transparente com borda dupla vermelha #b91c1c de 3px, um anel interno vermelho de 1px 6px para dentro (box-shadow), texto vermelho escuro #7f1d1d em caixa alta 13px extra-bold em duas linhas, inclinado -12 graus com 90% de opacidade. No hover ele endireita, escala 1.05, fica totalmente opaco e ganha o tom #fef2f2; active #fee2e2. Focus com outline vermelho de 2px e offset de 4px.

Mesma prateleira