Design for AI

Neon ciano pulsante

Neon ciano pulsante: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

glowneonpillpulsedark

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

Um botão pílula neon sobre quase preto #020617: borda de 2px ciano #22d3ee, texto ciano de 15px semibold com espaçamento de 0.04em, padding de 13px por 30px e um brilho ciano (8px externo mais 8px interno) que pulsa mais forte a cada 2 segundos. No hover se preenche de ciano sólido com texto escuro e um brilho grande de 24px/60px, o pulso para. No active o brilho cai para 6px, o foco é um outline branco de 2px com offset de 4px.

Mesma prateleira