Wall Light Switch
A wall plate with screws and a toggle lever that flips up and down in 3D with a small click of overshoot. The plate glows warm when on, and a locator LED lights it in the dark when off.
Also known as: css light switch, realistic light switch, light switch toggle.
HTML
<label class="tgl-wall-light-switch">
<input type="checkbox" role="switch" aria-label="Light">
<span class="tgl-wall-light-switch-plate" aria-hidden="true">
<span class="tgl-wall-light-switch-slot">
<span class="tgl-wall-light-switch-lever"></span>
</span>
</span>
</label>CSS
.tgl-wall-light-switch {
--c: var(--tgl-color, #3b82f6);
font-size: var(--tgl-size, 24px);
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.tgl-wall-light-switch input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.tgl-wall-light-switch-plate {
position: relative;
display: block;
width: 3.4em;
height: 5.4em;
border-radius: 0.45em;
background: linear-gradient(150deg, #fafaf9, #e7e5e4);
box-shadow:
0 0.25em 0.5em rgba(0, 0, 0, 0.2),
0 0.04em 0.1em rgba(0, 0, 0, 0.25),
inset 0 0.05em 0 #fff,
inset 0 -0.08em 0.12em rgba(0, 0, 0, 0.08),
0 0 0 0 rgba(253, 224, 71, 0);
transition: box-shadow 0.4s ease;
}
/* two screws */
.tgl-wall-light-switch-plate::before,
.tgl-wall-light-switch-plate::after {
content: "";
position: absolute;
left: calc(50% - 0.2em);
width: 0.4em;
height: 0.4em;
border-radius: 50%;
background:
linear-gradient(35deg, transparent 43%, #78716c 43% 57%, transparent 57%),
radial-gradient(circle at 35% 35%, #f5f5f4, #a8a29e);
box-shadow: 0 0.03em 0.05em rgba(0, 0, 0, 0.3);
}
.tgl-wall-light-switch-plate::before { top: 0.45em; }
.tgl-wall-light-switch-plate::after { bottom: 0.45em; transform: rotate(80deg); }
.tgl-wall-light-switch-slot {
position: absolute;
inset: 0;
display: block;
width: 1.2em;
height: 2.5em;
margin: auto;
border-radius: 0.3em;
background: linear-gradient(#d6d3d1, #f5f5f4);
box-shadow: inset 0 0.1em 0.2em rgba(0, 0, 0, 0.35), 0 0.04em 0 #fff;
}
/* locator LED: lit while the light is off */
.tgl-wall-light-switch-slot::after {
content: "";
position: absolute;
left: calc(50% - 0.1em);
top: calc(100% + 0.28em);
width: 0.2em;
height: 0.2em;
border-radius: 50%;
background: var(--c);
box-shadow: 0 0 0.25em var(--c);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.tgl-wall-light-switch-lever {
position: absolute;
left: 0.25em;
top: 0.625em;
width: 0.7em;
height: 1.25em;
border-radius: 0.35em;
background: linear-gradient(#fff, #d6d3d1);
box-shadow: 0 0.35em 0.25em rgba(0, 0, 0, 0.3), inset 0 -0.06em 0.06em rgba(0, 0, 0, 0.15);
transform: perspective(3em) translateY(0.45em) rotateX(45deg);
transition: transform 0.28s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.28s ease;
}
/* the underside is darker: fades in when the lever points up */
.tgl-wall-light-switch-lever::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(#a8a29e, #e7e5e4);
opacity: 0;
transition: opacity 0.2s ease;
}
.tgl-wall-light-switch input:checked + .tgl-wall-light-switch-plate {
box-shadow:
0 0.25em 0.5em rgba(0, 0, 0, 0.2),
0 0.04em 0.1em rgba(0, 0, 0, 0.25),
inset 0 0.05em 0 #fff,
inset 0 -0.08em 0.12em rgba(0, 0, 0, 0.08),
0 0 1em 0.2em rgba(253, 224, 71, 0.55);
}
.tgl-wall-light-switch input:checked + .tgl-wall-light-switch-plate .tgl-wall-light-switch-lever {
transform: perspective(3em) translateY(-0.45em) rotateX(-45deg);
box-shadow: 0 0.12em 0.2em rgba(0, 0, 0, 0.25), inset 0 -0.06em 0.06em rgba(0, 0, 0, 0.15);
}
.tgl-wall-light-switch input:checked + .tgl-wall-light-switch-plate .tgl-wall-light-switch-lever::before { opacity: 1; }
.tgl-wall-light-switch input:checked + .tgl-wall-light-switch-plate .tgl-wall-light-switch-slot::after {
background: #d6d3d1;
box-shadow: 0 0 0 transparent;
}
.tgl-wall-light-switch input:focus-visible + .tgl-wall-light-switch-plate {
outline: 2px solid var(--c);
outline-offset: 0.2em;
}
@media (prefers-reduced-motion: reduce) {
.tgl-wall-light-switch, .tgl-wall-light-switch *, .tgl-wall-light-switch::before, .tgl-wall-light-switch::after, .tgl-wall-light-switch *::before, .tgl-wall-light-switch *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--tgl-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--tgl-size. Every other dimension is inem, so the whole thing scales together. Currently previewing24px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.