# Píldora bicolor (B 018)

Categoría: Botones  
Etiquetas: pill, solid, two-tone, badge  
Página: https://designforai.dev/es/snippet/btn-018

## Prompt

Un botón píldora oscuro #18181b con texto blanco de 14px y una insignia interior tipo píldora en lima #a3e635 a la derecha (texto oscuro de 12px, padding de 6px por 10px, totalmente redondeada). Padding exterior de 8px con 18px a la izquierda. Al pasar el cursor se aclara a #27272a, active #000. Outline de foco de 2px lima.

## HTML

```html
<button class="btn-018">New <span>v2.0</span></button>
```

## CSS

```css
.btn-018 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 14px/1 system-ui,sans-serif;
  color: #fff;
  background: #18181b;
  border: 0;
  border-radius: 999px;
  padding: 8px 8px 8px 18px;
  cursor: pointer;
  transition: background .15s
}
.btn-018 span {
  font-size: 12px;
  color: #18181b;
  background: #a3e635;
  border-radius: 999px;
  padding: 6px 10px
}
.btn-018:hover {
  background: #27272a
}
.btn-018:focus-visible {
  outline: 2px solid #a3e635;
  outline-offset: 2px
}
.btn-018:active {
  background: #000
}
```