Shopify Articles

Etherycle sometimes blogs about ways to make you more money!

For RainyCafe, we wanted toggle photo realistic toggle switches as our checkboxes. To achieve the effect we used an image sprite and some CSS trickery.

RainyCafe toggles

The magic here is that the checkbox is hidden, and the label itself is what we style. The label is an image of the switch's on/off lozenge, and the label's span is the switch's pin.

See the Pen CSS-Only Sliding Toggle Switch by Kurt Elster (@kgelster) on CodePen

Check it on CodePen.