# Nordlicht-Leiste (B 138)

Kategorie: Buttons  
Tags: aurora, full-width, animated, dark, gradient-sweep  
Seite: https://designforai.dev/de/snippet/btn-138

## Prompt

Ein dunkelgrüner #022c22 Leisten-Button in voller Breite, 10px Radius, 18px Padding, blasser #ecfdf5 Text 16px semibold. Hinter dem Text (overflow hidden) fegt ein weichgezeichnetes diagonales Band aus Grün #34d399, Cyan #22d3ee und Lavendel #a78bfa bei 40% Opacity langsam von links nach rechts und kippt dabei (5s alternierend) wie Nordlichter. Hover schärft den Blur auf 8px und beschleunigt auf 2s; active dunkelt die Basis. Fokus 2px grüne Outline.

## HTML

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

## CSS

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