20 Pure CSS Toggles & Switches
Split-Flap Board
A retro-mechanical airport departure board built from CSS-only rotateX flips. Toggling cycles both rows simultaneously — OFFLINE flips to ONLINE, STANDBY flips to ACTIVE — with each character flipping in sequence for the cascading split-flap feel.
Split-Flap Board the 5th of 20 designs in the 20 Pure CSS Toggles & Switches 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
<label class="tg-flap">
<input class="tg-flap-input" type="checkbox" checked>
<span class="tg-flap-stage" aria-hidden="true">
<span class="tg-flap-row">
<span class="tg-flap-lbl">Status</span>
<span class="tg-flap-board">
<span class="tg-flap-char" data-off="O" data-on="O"></span>
<span class="tg-flap-char" data-off="F" data-on="N"></span>
<span class="tg-flap-char" data-off="F" data-on="L"></span>
<span class="tg-flap-char" data-off="L" data-on="I"></span>
<span class="tg-flap-char" data-off="I" data-on="N"></span>
<span class="tg-flap-char" data-off="N" data-on="E"></span>
<span class="tg-flap-char" data-off="E" data-on="·"></span>
</span>
</span>
<span class="tg-flap-row">
<span class="tg-flap-lbl">Mode</span>
<span class="tg-flap-board">
<span class="tg-flap-char" data-off="S" data-on="A"></span>
<span class="tg-flap-char" data-off="T" data-on="C"></span>
<span class="tg-flap-char" data-off="A" data-on="T"></span>
<span class="tg-flap-char" data-off="N" data-on="I"></span>
<span class="tg-flap-char" data-off="D" data-on="V"></span>
<span class="tg-flap-char" data-off="B" data-on="E"></span>
<span class="tg-flap-char" data-off="Y" data-on="·"></span>
</span>
</span>
</span>
</label> .tg-flap {
--tg-flap-bg: #0a0a12;
--tg-flap-border: #1a1a28;
--tg-flap-ash: #7a7a98;
--tg-flap-volt: #e0ff00;
--tg-flap-ice: #00e5ff;
--tg-flap-flip: 0.5s;
display: inline-block;
cursor: pointer;
font-family: "Inconsolata", "Roboto Mono", ui-monospace, monospace;
user-select: none;
}
.tg-flap-input {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
.tg-flap-stage {
display: flex;
flex-direction: column;
gap: 10px;
}
.tg-flap-row {
display: flex;
align-items: center;
gap: 10px;
}
.tg-flap-lbl {
min-width: 56px;
font-size: 12px;
color: var(--tg-flap-ash);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.tg-flap-board {
display: flex;
gap: 4px;
}
/* Each char is a black tile with a horizontal seam down the middle and
a CSS-only flip. The letter is rendered via data-off/data-on attrs in
a pseudo, so toggling swaps which attr is shown. */
.tg-flap-char {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 38px;
border-radius: 5px;
background: var(--tg-flap-bg);
border: 1px solid var(--tg-flap-border);
font-size: 18px;
font-weight: 500;
color: var(--tg-flap-ash);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.04),
inset 0 -1px 0 rgba(0,0,0,0.3);
overflow: hidden;
transform-style: preserve-3d;
perspective: 400px;
transition: color var(--tg-flap-flip) ease;
}
/* Seam across the middle of every char tile. */
.tg-flap-char::after {
content: "";
position: absolute;
left: 0; right: 0;
top: 50%;
height: 1px;
background: rgba(0,0,0,0.6);
z-index: 2;
pointer-events: none;
}
/* The letter itself lives in ::before so we can flip it independently
of the tile chrome. Default shows the off character. */
.tg-flap-char::before {
content: attr(data-off);
display: inline-block;
transform-origin: center;
animation: tg-flap-off var(--tg-flap-flip) ease both;
}
@keyframes tg-flap-off {
0% { transform: rotateX(-90deg); }
50% { content: attr(data-off); }
100% { transform: rotateX(0); }
}
@keyframes tg-flap-on {
0% { transform: rotateX(0); }
50% { transform: rotateX(-90deg); }
51% { transform: rotateX(90deg); }
100% { transform: rotateX(0); }
}
/* Stagger — each char is delayed 80ms further than the previous so the
board cascades. Both rows share the same stagger pattern. */
.tg-flap-board .tg-flap-char:nth-child(1) { animation-delay: 0ms; }
.tg-flap-board .tg-flap-char:nth-child(2) { animation-delay: 80ms; }
.tg-flap-board .tg-flap-char:nth-child(3) { animation-delay: 160ms; }
.tg-flap-board .tg-flap-char:nth-child(4) { animation-delay: 240ms; }
.tg-flap-board .tg-flap-char:nth-child(5) { animation-delay: 320ms; }
.tg-flap-board .tg-flap-char:nth-child(6) { animation-delay: 400ms; }
.tg-flap-board .tg-flap-char:nth-child(7) { animation-delay: 480ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-char {
color: var(--tg-flap-volt);
}
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-row:nth-child(2) .tg-flap-char {
color: var(--tg-flap-ice);
}
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-char::before {
content: attr(data-on);
animation: tg-flap-on var(--tg-flap-flip) ease both;
animation-delay: inherit;
}
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(1) { animation-delay: 0ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(2) { animation-delay: 80ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(3) { animation-delay: 160ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(4) { animation-delay: 240ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(5) { animation-delay: 320ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(6) { animation-delay: 400ms; }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-board .tg-flap-char:nth-child(7) { animation-delay: 480ms; }
.tg-flap-input:focus-visible ~ .tg-flap-stage {
outline: 2px solid var(--tg-flap-volt);
outline-offset: 6px;
border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
.tg-flap-char,
.tg-flap-char::before { animation: none; transition: none; }
.tg-flap-char::before { content: attr(data-off); }
.tg-flap-input:checked ~ .tg-flap-stage .tg-flap-char::before { content: attr(data-on); }
}