Zweifarbige Pille

Zweifarbige Pille: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

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

Ein dunkler Pillen-Button #18181b mit weißem 14px Text und einem limettengrünen #a3e635 inneren Pillen-Badge rechts (12px dunkler Text, 6px mal 10px Padding, voll abgerundet). Äußeres Padding 8px, links 18px. Hover hellt auf #27272a, active #000. Fokus-Outline 2px Limette.

Zweifarbige Pille

Gleiches Regal