Píldora bicolor

Píldora bicolor: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

pill solidtwo-tonebadge

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
}

HTML

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

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.

Píldora bicolor

Misma estantería