Two-tone pill

Two-tone pill: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

A dark pill button #18181b with white 14px text and a lime #a3e635 inner pill badge on the right (12px dark text, 6px by 10px padding, fully rounded). Outer padding 8px with 18px on the left. Hover lightens to #27272a, active #000. Focus outline 2px lime.

Two-tone pill

Same shelf