# Puffy sticker outline (B 160)

Category: Buttons  
Tags: sticker, badge, pill, rotation, outline-stroke  
Page: https://designforai.dev/snippet/btn-160

## Prompt

A puffy cartoon-sticker pill: light blue #bfdbfe fill, 3px navy #1e3a8a border, then a 4px white gap and a 2px navy outer stroke (box-shadow rings) with a hard navy offset shadow (4px 6px), 16px black-weight navy text, 12px by 24px padding, tilted +4 degrees. Hover springs to -4 degrees at 1.06 scale on #93c5fd; active levels and presses onto the shadow. Focus 2px navy outline offset 10px to clear the rings.

## HTML

```html
<button class="btn-160">Wow</button>
```

## CSS

```css
.btn-160 {
  font: 900 16px/1 system-ui,sans-serif;
  letter-spacing: .02em;
  color: #1e3a8a;
  background: #bfdbfe;
  border: 3px solid #1e3a8a;
  border-radius: 999px;
  padding: 12px 24px;
  cursor: pointer;
  box-shadow: 0 0 0 4px #fff,0 0 0 6px #1e3a8a,4px 6px 0 6px #1e3a8a;
  transform: rotate(4deg);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),background .2s
}
.btn-160:hover {
  transform: rotate(-4deg) scale(1.06);
  background: #93c5fd
}
.btn-160:focus-visible {
  outline: 2px solid #1e3a8a;
  outline-offset: 10px
}
.btn-160:active {
  transform: rotate(0) translate(2px,3px);
  box-shadow: 0 0 0 4px #fff,0 0 0 6px #1e3a8a,1px 2px 0 6px #1e3a8a
}
```