Good CSS switch

 There is a good CSS switch that looks like a light switch at: 'codepen.io/marcusconnor/pen/QJNvMa'.

This switch uses 'em' units so it is easy to scale.

The 'on' side is at the left which is the reverse of most switches. I removed the words and colored the sides red and green. I start off with the 'input' element being 'checked' and reverse the sense of the action in the JavaScript of the handler for a click.  I found it too difficult to change the CSS and HTML to swap the left and right sides.

One trick with all pure-CSS switches is that clicking the label sets the related 'input' element. So you hide the 'input' field and style the label with maybe 'span' elements inside the label and the 'spans' can have a 'display' value of 'inline-block'. 

Another trick is to use the ':checked' state on the 'input' element to change the style of the adjacent 'label' with a CSS selector like 'input:checked + div'. 

The 'input' element can be put inside the 'label' element.

I sometimes change the code in 'codepen' to help me understand the code. I set colors and background colors.

There are more tips at: bbingo.xyz/techtips/