
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.

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.