# Lime tube flicker (B 108)

Category: Buttons  
Tags: glow, neon, rectangle, dark, flicker  
Page: https://designforai.dev/snippet/btn-108

## 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.

## HTML

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

## CSS

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