# Neon-Puls Cyan (B 106)

Kategorie: Buttons  
Tags: glow, neon, pill, pulse, dark  
Seite: https://designforai.dev/de/snippet/btn-106

## Prompt

Ein Neon-Pillen-Button auf fast schwarzem #020617: 2px Cyan-Rahmen #22d3ee, Cyan-Text 15px semibold mit 0.04em Spacing, 13px mal 30px Padding und ein Cyan-Leuchten (8px außen plus 8px innen), das alle 2 Sekunden stärker pulsiert. Hover füllt komplett Cyan mit dunklem Text und einem großen 24px/60px Leuchten, der Puls stoppt. Active reduziert das Leuchten auf 6px, Fokus ist eine weiße 2px Outline mit 4px Offset.

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