Northern lights bar

Northern lights bar: a CSS button. Copy the rules, or the prompt that rebuilds it.

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

A full-width dark green #022c22 bar button, 10px radius, 18px padding, pale #ecfdf5 16px semibold text. Behind the text (overflow hidden) a blurred diagonal band of green #34d399, cyan #22d3ee and lavender #a78bfa at 40% opacity slowly sweeps left to right and tilts (5s alternating) like the northern lights. Hover sharpens the blur to 8px and speeds it to 2s; active darkens the base. Focus 2px green outline.

Northern lights bar

Same shelf