Barra aurora boreal

Barra aurora boreal: botón en CSS. Copia las reglas, o el prompt que reproduce el resultado.

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

Un botón de barra verde oscuro #022c22 de ancho completo, radio de 10px, padding de 18px, texto pálido #ecfdf5 de 16px semibold. Detrás del texto (overflow hidden) una banda diagonal desenfocada de verde #34d399, cian #22d3ee y lavanda #a78bfa al 40% de opacidad barre despacio de izquierda a derecha y se inclina (5s alternado) como una aurora boreal. Al pasar el cursor el desenfoque se afina a 8px y se acelera a 2s; en active la base se oscurece. Foco con outline verde de 2px.

Barra aurora boreal

Misma estantería