Capsule with dot

Capsule with dot: a CSS button. Copy the rules, or the prompt that rebuilds it.

pillstatusindicatorpulse

CSS

.btn-022 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 13px/1 system-ui,sans-serif;
  color: #991b1b;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s
}
.btn-022 i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: btn-022-p 1.4s infinite
}
@keyframes btn-022-p {
  0%,100% {
    box-shadow: 0 0 0 0 rgba(239,68,68,.5)
  }
  70% {
    box-shadow: 0 0 0 6px rgba(239,68,68,0)
  }
}
.btn-022:hover {
  background: #fee2e2
}
.btn-022:focus-visible {
  outline: 2px solid #ef4444;
  outline-offset: 2px
}
.btn-022:active {
  background: #fecaca
}
@media (prefers-reduced-motion: reduce) {
  .btn-022, .btn-022 * { animation: none; transition: none; }
}

HTML

<button class="btn-022"><i></i>Live</button>

Prompt

A small capsule button, pale red background #fef2f2 with a 1px #fecaca border, dark red text #991b1b at 13px semibold, 8px by 14px padding, fully rounded. On the left an 8px red #ef4444 dot pulses a translucent ring outward every 1.4s. Hover #fee2e2, active #fecaca. Focus outline 2px red.

Capsule with dot

Same shelf