Etiqueta com furo

Etiqueta com furo: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

stickerbadgetagrotationclip-path

CSS

.btn-157 {
  position: relative;
  font: 700 14px/1 system-ui,sans-serif;
  color: #422006;
  background: #fde047;
  border: 0;
  border-radius: 4px 14px 14px 4px;
  padding: 12px 18px 12px 28px;
  cursor: pointer;
  transform: rotate(-3deg);
  transform-origin: left center;
  clip-path: polygon(0 50%,12px 0,100% 0,100% 100%,12px 100%);
  transition: transform .25s,background .2s
}
.btn-157::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #ca8a04
}
.btn-157:hover {
  transform: rotate(2deg);
  background: #facc15
}
.btn-157:focus-visible {
  outline: 2px solid #ca8a04;
  outline-offset: 4px
}
.btn-157:active {
  transform: rotate(0);
  background: #eab308
}

HTML

<button class="btn-157">Sale -30%</button>

Prompt

Um botão amarelo #fde047 em formato de etiqueta de preço: um polígono em clip-path dá uma ponta na extremidade esquerda, os cantos da direita são arredondados em 14px, e um furo branco de 6px com um anel fino #ca8a04 fica perto da ponta. Texto marrom escuro #422006 14px bold, padding 12px 18px 12px 28px, pendurado a -3 graus pela borda esquerda. No hover balança para +2 graus em #facc15; no active endireita em #eab308. Focus com outline de 2px em amarelo escuro.

Etiqueta com furo

Mesma prateleira