# Price tag hole (B 157)

Category: Buttons  
Tags: sticker, badge, tag, rotation, clip-path  
Page: https://designforai.dev/snippet/btn-157

## Prompt

A yellow #fde047 price-tag button: a clip-path polygon gives it a pointed left end, the right corners are rounded 14px, and a 6px white hole with a thin #ca8a04 ring sits near the point. Dark brown #422006 14px bold text, padding 12px 18px 12px 28px, hung at -3 degrees from its left edge. Hover swings it to +2 degrees on #facc15; active levels it on #eab308. Focus 2px dark-yellow outline.

## HTML

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

## CSS

```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
}
```