July 31, 2014 / Melissa Faudree

Proto.io offers a free online on and off switch generator with HTML and CSS. The On/Off FlipSwitch works best with Apple, Android, Google Chrome, Mozilla Firefox, and Safari. There seems to be a few bugs for Opera and Internet Explorer.


First users must select the device style in which the FlipSwitch will display. Users have the option to select custom, iOS5, iOS5, Android or Windows 8. They can also select a random style. Random gives users at least 7 different styles to select from.

Active State
Under the active state or by default, the “on” button, users can select a background color, text color and enter text. If you know the background color or text color, you are able to type in the hex value. However, you may also select a color from the color picker.

Inactive State
Just like the active state, the inactive state allows users to select a background color, text color and enter text. By default, the inactive state is displayed as “off.”

The switch is the actual circle where users will click. This is where users have the most control over the settings. Within the switch settings, users can adjust the switch size. The switch can be as small as 5px or as large as 50px. However, users can also enter their own values as well. Users are capable of making the default set for the “on” switch or the active state. Users can also make the switch have dual colors. They can adjust the background color and border color of the switch.

Under labels, users are only able to change the font size and text spacing. To adjust these two features, you can either slide the bar to the appropriate setting or type in a specific number.

The FlipSwitch generator allows users to adjust the width, height, and border radius. Users can either use slider to control the settings or enter their values.

Final Words
Any changes made are adjusted within the CSS and HTML automatically. The code can be found towards the bottom of the page. For convenience, users can click on the “copy to clipboard” for the CSS and HTML. The only thing that I would have wanted more control over from this generator was the animated transitions and font options. If you knew the correct code, you could of course do this on your own. Overall, Proto.io’s On/Off FlipSwitch is an easy tool that allows users to create a custom button within a matter of minutes.

Posted In: Blog, Design, Online Service