# Cápsula com ponto (B 022)

Categoria: Botões  
Tags: pill, status, indicator, pulse  
Página: https://designforai.dev/pt/snippet/btn-022

## 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.

## HTML

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

## CSS

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