On/Off FlipSwitch: Generate CSS3 On/Off Switches With Animated Transitions

Dave LeClair 06-08-2012

Are you looking for an easy way to generate CSS3 on/off switches for a website? If you are looking for switches that are easy to make and feature smooth, stylish animated transitions, On/Off FlipSwitch is a fantastic option. I am not the greatest programmer, and I was able to get a variety of switches up and running in a matter of seconds.


css3 on off switch

This handy website has settings for iOS 4, iOS 5 and Android switches built in. If you want your switch to match those styles, all you need to do is click the button for the one you need and scroll down to copy the code. In a matter of seconds you will have the button of your choice ready for your website.


If you want to make a button of your own style, it will take a few seconds longer, but it is certainly not difficult. You do not have to write any actual code to make the switch. You drag the sliders and customize the switch until the look suits you. You can change the size, color, button style and more. As you make changes, you will see them reflected in the preview of the switch in real-time.


  • Create a CSS3 on/off switch with ease.
  • Animated transitions between on and off.
  • Copy and paste the final code.
  • iOS 4, iOS 5 and Android switches available by default.
  • Customize the buttons exactly to your needs.

Find On/Off FlipSwitch @

Affiliate Disclosure: By buying the products we recommend, you help keep the site alive. Read more.

Whatsapp Pinterest

Leave a Reply

Your email address will not be published. Required fields are marked *