CSS Light Switch
This is a graphic and animation of a standard, household light switch. It switches on and off.
The graphics and functionality are composed entirely in HTML and CSS. There are no images, no JavaScript.
Fiddle with it and examine it on CodePen.
Okay, Great. But... why?
This wee bit of fundamental code is designed to illustrate how much can be done with basic HTML and CSS. This type of return-to-form thinking helps minimize file sizes and load times, and keeps functionality as cross-browser friendly as possible.
Why CodePen?
I like CodePen. It works remarkably well for testing out little bits of code, working out problems, or implementing theories before applying them to the primary codebase.
Also, I wanted to remove the example from this Next.js environment to help drive home the fact that the element is only HTML and CSS.