20 Pure CSS Toggles & Switches
Flip Card
A 3D flip toggle — front face shows OFF, back face shows ON. Rotates around the Y axis on toggle. Showcases transform-style: preserve-3d.
Flip Card the 13th 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-flip">
<input class="tg-flip-input" type="checkbox" checked>
<span class="tg-flip-card" aria-hidden="true">
<span class="tg-flip-face tg-flip-on">ON</span>
<span class="tg-flip-face tg-flip-off">OFF</span>
</span>
<span class="tg-flip-label">Auto-save</span>
</label> .tg-flip {
display: inline-flex;
align-items: center;
gap: 14px;
cursor: pointer;
font-family: "Inter", "Segoe UI", system-ui, sans-serif;
font-size: 14px;
color: #f0eeff;
user-select: none;
perspective: 400px;
}
.tg-flip-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-flip-card {
position: relative;
width: 56px;
height: 30px;
transform-style: preserve-3d;
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.tg-flip-face {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
border-radius: 6px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.tg-flip-on {
background: linear-gradient(135deg, #2eb88a 0%, #1d9c70 100%);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.tg-flip-off {
background: linear-gradient(135deg, #4a4a52 0%, #2a2a30 100%);
color: #b8b6d4;
transform: rotateY(180deg);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.tg-flip-input:not(:checked) ~ .tg-flip-card {
transform: rotateY(180deg);
}
.tg-flip-input:focus-visible ~ .tg-flip-card {
outline: 2px solid #7c6cff;
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.tg-flip-card { transition: none; }
}