Kapsel mit Punkt

.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; }
}

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