# Pille mit Ring (B 019)

Kategorie: Buttons  
Tags: pill, outline, ring-hover, rounded  
Seite: https://designforai.dev/de/snippet/btn-019

## Prompt

Ein weißer Pillen-Button mit 1px Rahmen #cbd5e1 und Schiefer-Text #1e293b, 14px semibold, 11px mal 22px Padding. Beim Hover dunkelt der Rahmen auf #1e293b und ein 4px halbtransparenter Schiefer-Ring (12%) blendet sich drumherum ein. Fokus zeigt denselben Ring bei 35%. Active-Hintergrund #f1f5f9.

## HTML

```html
<button class="btn-019">Explore</button>
```

## CSS

```css
.btn-019 {
  font: 600 14px/1 system-ui,sans-serif;
  color: #1e293b;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(30,41,59,0);
  transition: box-shadow .2s,border-color .2s
}
.btn-019:hover {
  border-color: #1e293b;
  box-shadow: 0 0 0 4px rgba(30,41,59,.12)
}
.btn-019:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(30,41,59,.35);
  border-color: #1e293b
}
.btn-019:active {
  background: #f1f5f9
}
```