Design for AI

Cápsula com ponto

Cápsula com ponto: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

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

Um botão cápsula pequeno, fundo vermelho claro #fef2f2 com borda de 1px #fecaca, texto vermelho escuro #991b1b em 13px semibold, padding de 8px por 14px, totalmente arredondado. À esquerda, um ponto vermelho #ef4444 de 8px pulsa um anel translúcido para fora a cada 1.4s. Hover #fee2e2, active #fecaca. Outline de foco de 2px vermelho.

Mesma prateleira