Split mit Zähler

Split mit Zähler: CSS-Button. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.

splitdualcounterbadge

CSS

.btn-091 {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #d1d5db
}
.btn-091 button {
  font: 600 13px/1 system-ui,sans-serif;
  color: #24292f;
  background: #f6f8fa;
  border: 0;
  padding: 9px 14px;
  cursor: pointer;
  transition: background .15s
}
.btn-091 button+button {
  background: #fff;
  border-left: 1px solid #d1d5db;
  font-weight: 500
}
.btn-091 button:first-child:hover {
  background: #eaeef2
}
.btn-091 button+button:hover {
  color: #0969da
}
.btn-091 button:focus-visible {
  outline: 2px solid #0969da;
  outline-offset: -2px
}
.btn-091 button:active {
  background: #e1e5ea
}

HTML

<div class="btn-091"><button>Star</button><button>1,204</button></div>

Prompt

Ein Split-Button "Star / 1,204": zwei Segmente in einem 1px Rahmen #d1d5db mit 6px Radius. Linkes Segment #f6f8fa mit dunklem #24292f 13px semibold Text, rechtes Segment weiß mit dem Zähler in Weight 500, getrennt durch eine 1px Linie. Links hovert auf #eaeef2, rechts färbt der Hover den Zähler blau #0969da; active #e1e5ea. Fokus-Outline 2px Blau inset.

Split mit Zähler

Gleiches Regal