Progress stripe static

Progress stripe static: a CSS button. Copy the rules, or the prompt that rebuilds it.

progressrectanglefillcustom-propertypercentage

CSS

.btn-182 {
  --p: 0%;
  position: relative;
  font: 600 14px/1 ui-monospace,Menlo,monospace;
  color: #0f172a;
  background: linear-gradient(90deg,#86efac var(--p),#f1f5f9 var(--p));
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 13px 22px;
  cursor: pointer;
  transition: filter .2s
}
.btn-182:hover {
  filter: brightness(.97)
}
.btn-182:focus-visible {
  outline: 2px solid #16a34a;
  outline-offset: 3px
}
.btn-182:active {
  filter: brightness(.93)
}

HTML

<button class="btn-182" style="--p:64%">Uploading 64%</button>

Prompt

A progress button whose fill percentage is set with a --p custom property on the element (inline style, e.g. 64%): a hard-edged two-colour gradient shows green #86efac up to that point and grey #f1f5f9 after, 1px #cbd5e1 border, 6px radius, monospace 14px semibold #0f172a text, 13px by 22px padding. Hover and active only dim slightly. Focus 2px green outline. Change --p from JS or a class to advance.

Progress stripe static

Same shelf