Create CSS3 Toggle Button With On/Off FlipSwitch Generator

By . in Web Design. Updated on .

If you are sick of using buttons to toggle something on or off, perhaps you may find a breath of fresh air in a flip switch instead. With the very nice improvement of web development nowadays, creating On/Off flip switch, like what you see in a mobile OS is very easy. You just need the right tool for it.

Introducing the web app On/Off FlipSwitch Generator which will help you to easily create any mobile OS-like style for your custom On/Off button. The button is also compatible with most of modern web browsers: Chrome, Firefox, Safari, Opera, IE9, Android and iOS as well.

Getting Started

On/Off FlipSwitch Generator has a pretty simple and intuitive interface. A live preview is also available to display the result style as you change the inputs available. Let’s take a look.

user interface

As you can see in the following screenshot, On/Off FlipSwitch Generator comes up with 6 main input option: Style, Active State, Inactive State, Switch, Labels and Sizing.

input option

In the Style section, you can choose what kind of button style you want from iOS4/5, Android and Windows 8. The Custom option will let you build the button from scratch.

style option

Below, there are two useful links: Random style is used to generate a random button. Whilst Reset to default state is used for resetting all changes you’ve made from other input.

Below this you have the look of your button in its Active State and Inactive State. In the sections, you’ll play with background color, text color and the text label of the button. You can change the text label from ON and OFF to something entirely different, like Mute or Unmute.

active inactive state

Switch input helps you with manipulating the switcher style. Here you can adjust the switch size, the switch background and border colors, and the default position of the flip switch. For Dual switch color, you can pick the color of the switch to change, on separate flipped positions.

switch option

Also available for customization is the label style: font size and text spacing; and the button size: width, height and border radius.

labels options
sizing option
Getting Your Button

Happy with the style you have created? Now, let’s grab the codes so you can apply to your site or product. Scroll down to see the resulting codes of the button you created. The codes are provided in CSS and HTML, just hit the Copy to clipboard link to copy the content and use the button.

output result

Enable IE Support

On the page, it is mentioned that the switch generated at the page is not supported on IE6-8. There is however a solution with a little javascript code (brought to you by one of the On/Off FlipSwitch Generator team, anna.mi).

To enable support in IE8 All you need to do is add a little CSS code which will change the button state based on .onoffswitch-checked class like so.

.onoffswitch-checked .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checked .onoffswitch-switch {
    right: 0px; 
}

Then, to toggle the .onoffswitch-checked class when it’s checked, add the following Javascript to your page:

<script>
$(document).ready(function(){
    $('.onoffswitch-label').click(function(){
        $(this).parent().toggleClass('onoffswitch-checked');
    });
});
</script>

If the “Switch ON by default” option is selected, don’t forget to also include the .onoffswitch-checked class to your html like so

<div class="onoffswitch onoffswitch-checked">

Final Thought

Do check out this and let us know if the flipswitch generator is working flawlessly without a bug. We can only run so many combinations but at the end of the day, if coding is beyond your capabilities, maybe start off with this handy tool before taking things to the next level. Let us know what you think.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail