# Puffiger Sticker-Rand (B 160)

Kategorie: Buttons  
Tags: sticker, badge, pill, rotation, outline-stroke  
Seite: https://designforai.dev/de/snippet/btn-160

## Prompt

Eine puffige Cartoon-Sticker-Pille: hellblaue #bfdbfe Füllung, 3px marineblauer #1e3a8a Rahmen, dann 4px weißer Abstand und ein 2px marineblauer Außenstrich (box-shadow Ringe) mit hartem marineblauem Versatzschatten (4px 6px), 16px Text in Black-Schnitt in Marine, 12px mal 24px Padding, um +4 Grad geneigt. Hover federt auf -4 Grad bei 1.06 Skalierung auf #93c5fd; Active richtet aus und drückt auf den Schatten. Focus: 2px marineblaue Outline mit 10px Offset, damit sie die Ringe freilässt.

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