Toggle Switch Using a PNG Overlay

I was in need of a more robust and cross browser compatible toggle switch, so I though I'd approach it in a different way than your usual CSS3 switches.

My solution uses a semi transparent PNG overlay for the rounded rectangle, with an inner image which animates from left to right, and vice versa. The toggle can be triggered by either clicking the switch, or the accompanying label.

Toggle Switch

The result is a jQuery powered, checkbox based toggle switch that looks and functions the same in most browsers, even IE6. It also has retina images for any iDevices that support them.

You can view the working example or view the code on Github.

  • (optional)
  • Security Code