Neon pulse cyan

Neon pulse cyan: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

HTML

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

Prompt

A neon pill button on near-black #020617: 2px cyan #22d3ee border, cyan 15px semibold text with 0.04em spacing, 13px by 30px padding, and a cyan glow (outer 8px plus inner 8px) that pulses stronger every 2 seconds. Hover fills solid cyan with dark text and a big 24px/60px glow, pulse stops. Active reduces the glow to 6px, focus is a white 2px outline offset 4px.

Neon pulse cyan

Same shelf