Pílula em dois tons

Pílula em dois tons: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um botão pílula escuro #18181b com texto branco de 14px e uma pílula interna lima #a3e635 à direita, como badge (texto escuro de 12px, padding de 6px por 10px, totalmente arredondada). Padding externo de 8px com 18px à esquerda. No hover clareia para #27272a, active #000. Outline de foco de 2px lima.

Pílula em dois tons

Mesma prateleira