Design for AI

Cápsula con punto

Cápsula con punto: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón cápsula pequeño, fondo rojo pálido #fef2f2 con borde de 1px #fecaca, texto rojo oscuro #991b1b de 13px semibold, padding de 8px por 14px, totalmente redondeado. A la izquierda, un punto rojo #ef4444 de 8px emite un anillo translúcido hacia fuera cada 1.4s. Hover #fee2e2, active #fecaca. Outline de foco de 2px rojo.

Misma estantería