# Pulso neón cian (B 106)

Categoría: Botones  
Etiquetas: glow, neon, pill, pulse, dark  
Página: https://designforai.dev/es/snippet/btn-106

## Prompt

Un botón píldora neón sobre casi negro #020617: borde de 2px cian #22d3ee, texto cian de 15px semibold con 0.04em de espaciado, padding de 13px por 30px, y un resplandor cian (8px exterior más 8px interior) que pulsa con más fuerza cada 2 segundos. Al pasar el cursor se rellena de cian sólido con texto oscuro y un gran resplandor de 24px/60px, y el pulso se detiene. En active el resplandor se reduce a 6px, el foco es un outline blanco de 2px con offset de 4px.

## HTML

```html
<button class="btn-106">Connect</button>
```

## CSS

```css
.btn-106 {
  font: 600 15px/1 system-ui,sans-serif;
  letter-spacing: .04em;
  color: #22d3ee;
  background: #020617;
  border: 2px solid #22d3ee;
  border-radius: 999px;
  padding: 13px 30px;
  cursor: pointer;
  box-shadow: 0 0 8px #22d3ee66,inset 0 0 8px #22d3ee33;
  animation: pulse106 2s ease-in-out infinite;
  transition: background .2s,color .2s
}
.btn-106:hover {
  background: #22d3ee;
  color: #020617;
  animation: none;
  box-shadow: 0 0 24px #22d3ee,0 0 60px #22d3ee66
}
.btn-106:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px
}
.btn-106:active {
  box-shadow: 0 0 6px #22d3ee
}
@keyframes pulse106 {
  50% {
    box-shadow: 0 0 22px #22d3ee99,inset 0 0 14px #22d3ee55
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-106, .btn-106 * { animation: none; transition: none; }
}
```