← All elements
<label class="dn"><input type="checkbox"><span class="sky"><b class="orb"></b><i class="cloud"></i><s></s><s></s><s></s></span></label>About this button
A wide switch where the sky turns from a sunny day with clouds to a starry night with a moon, driven by one checkbox.
How it works
One checkbox switches a gradient sky. A sun circle with soft rings slides right and turns into a moon using an inset shadow crescent, clouds slide away and three star dots fade in. All of it is transitions on siblings of the checkbox.
Ways to customise it
- Change the sky gradients for other palettes.
- Add more stars with extra s elements.
- Adjust the .5s timing.
Good to know
The visible state change is obvious, but add a text label or aria-label because the control has no words. Use it to toggle a theme by pairing it with :has on a parent.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.