LED Segment
Phosphor-green 7-segment-style display on a pure black panel with a faint scanline overlay.
LED Segment the 28th of 43 designs in the 43 CSS Button Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<button class="btn-led"> <span class="btn-led-scanline" aria-hidden="true"></span> <span class="btn-led-text">START</span> </button>
.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);
}