Lime tube flicker

Lime tube flicker: a CSS button. Copy the rules, or the prompt that rebuilds it.

CSS

.btn-108 {
  font: 800 14px/1 system-ui,sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a3e635;
  background: transparent;
  border: 2px solid #a3e635;
  border-radius: 4px;
  padding: 12px 24px;
  cursor: pointer;
  box-shadow: 0 0 12px #a3e63555,inset 0 0 12px #a3e63522;
  text-shadow: 0 0 8px #a3e635;
  transition: box-shadow .2s,color .2s,background .2s
}
.btn-108:hover {
  animation: flick108 .5s steps(2) 2;
  box-shadow: 0 0 20px #a3e635aa,inset 0 0 18px #a3e63544
}
.btn-108:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px
}
.btn-108:active {
  background: #a3e635;
  color: #0a0a0a;
  text-shadow: none
}
@keyframes flick108 {
  50% {
    opacity: .55
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-108, .btn-108 * { animation: none; transition: none; }
}

HTML

<button class="btn-108">Open</button>

Prompt

A neon-tube button: transparent background, 2px lime #a3e635 border, 4px radius, lime uppercase 14px extra-bold text with 0.12em tracking and an 8px lime text glow, 12px by 24px padding, outer and inner lime shadow. On hover it flickers twice in stepped opacity (0.5s) and the glow grows to 20px. Active fills lime with #0a0a0a text. Focus white 2px outline. Meant for dark backgrounds.

Lime tube flicker

Same shelf