Preisschild-Loch

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

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

Ein gelber #fde047 Preisschild-Button: ein clip-path Polygon gibt ihm ein spitzes linkes Ende, die rechten Ecken sind mit 14px abgerundet, und ein 6px großes weißes Loch mit dünnem #ca8a04 Ring sitzt nahe der Spitze. Dunkelbrauner #422006 14px bold Text, Padding 12px 18px 12px 28px, um -3 Grad an der linken Kante aufgehängt. Hover schwenkt ihn auf +2 Grad auf #facc15; Active richtet ihn auf #eab308 gerade. Focus: 2px dunkelgelbe Outline.

Preisschild-Loch

Gleiches Regal