Dividido com contador

Dividido com contador: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um botão dividido "Star / 1,204": dois segmentos dentro de uma borda de 1px #d1d5db com raio de 6px. Segmento esquerdo #f6f8fa com texto escuro #24292f em 13px semibold, segmento direito branco com o número em peso 500, divididos por uma linha de 1px. O esquerdo vai para #eaeef2 no hover, o hover do direito deixa o número azul #0969da; active #e1e5ea. Outline de foco de 2px azul, inset.

Dividido com contador

Mesma prateleira