Back to CSS Buttons LED Segment Pure CSS
Share
HTML
<button class="btn-led">
  <span class="btn-led-scanline" aria-hidden="true"></span>
  <span class="btn-led-text">START</span>
</button>
CSS
.btn-led {
  position: relative;
  padding: 14px 30px;
  border: 2px solid #1a3a20;
  border-radius: 4px;
  background: #0a0a0a;
  color: #3eff7f;
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 16px; font-weight: 900;
  letter-spacing: 0.2em;
  cursor: pointer;
  text-shadow:
    0 0 6px rgba(62,255,127,0.8),
    0 0 14px rgba(62,255,127,0.4);
  box-shadow:
    inset 0 0 0 1px #0a1a10,
    inset 0 0 24px rgba(62,255,127,0.08),
    0 4px 14px rgba(0,0,0,0.5);
  overflow: hidden;
  transition: text-shadow 0.18s ease;
}
.btn-led-scanline {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(62,255,127,0.05) 0 2px,
    transparent 2px 4px);
  pointer-events: none;
}
.btn-led-text { position: relative; }
.btn-led:hover {
  text-shadow:
    0 0 10px rgba(62,255,127,1),
    0 0 22px rgba(62,255,127,0.7),
    0 0 30px rgba(62,255,127,0.3);
}