Barra aurora boreal

Barra aurora boreal: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

aurorafull-widthanimated darkgradient-sweep

CSS

.btn-138 {
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  font: 600 16px/1 system-ui,sans-serif;
  letter-spacing: .02em;
  color: #ecfdf5;
  background: #022c22;
  border: 0;
  border-radius: 10px;
  padding: 18px;
  cursor: pointer;
  isolation: isolate
}
.btn-138::before {
  content: "";
  position: absolute;
  inset: -50% -10%;
  background: linear-gradient(100deg,transparent 20%,#34d39966 35%,#22d3ee66 50%,#a78bfa66 65%,transparent 80%);
  filter: blur(14px);
  z-index: -1;
  animation: lights138 5s ease-in-out infinite alternate
}
.btn-138:hover::before {
  animation-duration: 2s;
  filter: blur(8px)
}
.btn-138:focus-visible {
  outline: 2px solid #34d399;
  outline-offset: 3px
}
.btn-138:active {
  background: #011a14
}
@keyframes lights138 {
  from {
    transform: translateX(-25%) rotate(-4deg)
  }
  to {
    transform: translateX(25%) rotate(4deg)
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-138, .btn-138 * { animation: none; transition: none; }
}

HTML

<button class="btn-138">See the show</button>

Prompt

Um botão em barra de largura total verde escuro #022c22, raio de 10px, padding de 18px, texto claro #ecfdf5 de 16px semibold. Atrás do texto (overflow hidden), uma faixa diagonal desfocada de verde #34d399, ciano #22d3ee e lavanda #a78bfa a 40% de opacidade varre devagar da esquerda para a direita e inclina (5s alternado), como uma aurora boreal. No hover o blur cai para 8px e a velocidade sobe para 2s; no active a base escurece. Foco com outline verde de 2px.

Barra aurora boreal

Mesma prateleira