Sky Pill Switch
A day and night switch: a white knob glides across a blue sky pill that swaps its sun for a crescent moon.
Preview and code
index.html
<label class="sky"><input type="checkbox" role="switch" aria-label="Night mode"><span class="sky__track"><span class="sky__sun"></span><span class="sky__moon"></span><span class="sky__knob"></span></span></label>
styles.css
.sky{position:relative;display:inline-block;width:64px;height:34px}
.sky input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sky__track{position:absolute;inset:0;border-radius:34px;background:#36a2f4;box-shadow:inset 0 2px 4px rgba(0,0,0,.18);transition:background-color .4s ease}
.sky__knob{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3);transition:transform .4s cubic-bezier(.3,1.3,.5,1)}
.sky__sun{position:absolute;top:9px;right:9px;width:16px;height:16px;border-radius:50%;background:#ffc93c;box-shadow:0 0 0 3px rgba(255,201,60,.35);transition:opacity .3s ease}
.sky__moon{position:absolute;top:9px;left:9px;width:16px;height:16px;border-radius:50%;background:transparent;box-shadow:inset -5px -2px 0 0 #f4f1de;opacity:0;transition:opacity .3s ease}
.sky input:checked+.sky__track{background:#1d2a5c}
.sky input:checked+.sky__track .sky__knob{transform:translateX(30px)}
.sky input:checked+.sky__track .sky__sun{opacity:0}
.sky input:checked+.sky__track .sky__moon{opacity:1}
.sky input:focus-visible+.sky__track{outline:2px solid #1659f5;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.sky__track,.sky__knob,.sky__sun,.sky__moon{transition:none}}About
Built from one checkbox and a few pseudo-elements. Off shows daylight with the sun on the right; on turns the sky navy, moves the knob and shows the moon on the left.