Etiqueta de precio

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

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

Un botón amarillo #fde047 con forma de etiqueta de precio: un polígono en clip-path le da un extremo izquierdo en punta, las esquinas derechas van redondeadas a 14px y un agujero blanco de 6px con un anillo fino #ca8a04 queda cerca de la punta. Texto marrón oscuro #422006 14px bold, padding 12px 18px 12px 28px, colgado a -3 grados desde su borde izquierdo. En hover oscila a +2 grados sobre #facc15; en active se endereza sobre #eab308. Focus con outline amarillo oscuro de 2px.

Etiqueta de precio

Misma estantería