Split with counter

Split with counter: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

A split "Star / 1,204" button: two segments inside a 1px #d1d5db border with 6px radius. Left segment #f6f8fa with dark #24292f 13px semibold text, right segment white with the count at 500 weight, divided by a 1px line. Left hovers #eaeef2, right hover turns the count blue #0969da; active #e1e5ea. Focus outline 2px blue inset.

Split with counter

Same shelf