{"id":19445,"date":"2014-03-03T18:01:54","date_gmt":"2014-03-03T10:01:54","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19445"},"modified":"2025-04-04T01:42:33","modified_gmt":"2025-04-03T17:42:33","slug":"on-off-flip-switch-generator","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/","title":{"rendered":"Create CSS3 Toggle Button With On\/Off FlipSwitch Generator"},"content":{"rendered":"

If you are sick of using buttons to toggle<\/a> 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.<\/p>\n

Introducing the web app On\/Off FlipSwitch Generator<\/a> 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.<\/p>\n

Getting Started<\/h2>\n

On\/Off FlipSwitch Generator<\/strong> 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\u2019s take a look.<\/p>\n

\"user<\/figure>\n

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

\"input<\/figure>\n

In the Style<\/strong> 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.<\/p>\n

\"style<\/figure>\n

Below, there are two useful links: Random style<\/strong> is used to generate a random button. Whilst Reset to default state<\/strong> is used for resetting all changes you\u2019ve made from other input.<\/p>\n

Below this you have the look of your button in its Active State <\/strong>and Inactive State<\/strong>. In the sections, you\u2019ll 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.<\/p>\n

\"active<\/figure>\n

Switch<\/strong> 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<\/strong>, you can pick the color of the switch to change, on separate flipped positions.<\/p>\n

\"switch<\/figure>\n

Also available for customization is the label style: font size and text spacing; and the button size: width, height and border radius.<\/p>\n

\"labels<\/figure>\n
\"sizing<\/figure>\n

Getting Your Button<\/h3>\n

Happy with the style you have created? Now, let\u2019s 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<\/strong> link to copy the content and use the button.<\/p>\n

\"output<\/figure>\n

Enable IE Support<\/h2>\n

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<\/strong> team, anna.mi<\/a>).<\/p>\n

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<\/code> class like so.<\/p>\n

\r\n.onoffswitch-checked .onoffswitch-inner {\r\n    margin-left: 0;\r\n}\r\n\r\n.onoffswitch-checked .onoffswitch-switch {\r\n    right: 0px; \r\n}\r\n<\/pre>\n
Then, to toggle the .onoffswitch-checked<\/code> class when it\u2019s checked, add the following Javascript to your page:<\/p>\n
\r\n<script>\r\n$(document).ready(function(){\r\n    $('.onoffswitch-label').click(function(){\r\n        $(this).parent().toggleClass('onoffswitch-checked');\r\n    });\r\n});\r\n<\/script>\r\n<\/pre>\n
If the \u201cSwitch ON by default\u201d option is selected, don\u2019t forget to also include the .onoffswitch-checked<\/code> class to your html like so<\/p>\n
\r\n<div class=\"onoffswitch onoffswitch-checked\">\r\n<\/pre>\n
Final Thought<\/h2>\n
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.<\/p>","protected":false},"excerpt":{"rendered":"
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…<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[507,2902],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nCreate CSS3 Toggle Button With On\/Off FlipSwitch Generator - Hongkiat<\/title>\n<meta name=\"description\" content=\"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\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create CSS3 Toggle Button With On\/Off FlipSwitch Generator\" \/>\n<meta property=\"og:description\" content=\"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\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-03-03T10:01:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:42:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/on-off-flip-switch-generator\/user-interface.jpg\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/on-off-flip-switch-generator\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/on-off-flip-switch-generator\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"Create CSS3 Toggle Button With On\\\/Off FlipSwitch Generator\",\"datePublished\":\"2014-03-03T10:01:54+00:00\",\"dateModified\":\"2025-04-03T17:42:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/on-off-flip-switch-generator\\\/\"},\"wordCount\":586,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/on-off-flip-switch-generator\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/on-off-flip-switch-generator\\\/user-interface.jpg\",\"keywords\":[\"CSS\",\"CSS Tools\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/on-off-flip-switch-generator\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/on-off-flip-switch-generator\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/on-off-flip-switch-generator\\\/\",\"name\":\"Create CSS3 Toggle Button With On\\\/Off FlipSwitch Generator - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/on-off-flip-switch-generator\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/on-off-flip-switch-generator\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/on-off-flip-switch-generator\\\/user-interface.jpg\",\"datePublished\":\"2014-03-03T10:01:54+00:00\",\"dateModified\":\"2025-04-03T17:42:33+00:00\",\"description\":\"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\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/on-off-flip-switch-generator\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/on-off-flip-switch-generator\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/on-off-flip-switch-generator\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/on-off-flip-switch-generator\\\/user-interface.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/on-off-flip-switch-generator\\\/user-interface.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/on-off-flip-switch-generator\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create CSS3 Toggle Button With On\\\/Off FlipSwitch Generator\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create CSS3 Toggle Button With On\/Off FlipSwitch Generator - Hongkiat","description":"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","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/","og_locale":"en_US","og_type":"article","og_title":"Create CSS3 Toggle Button With On\/Off FlipSwitch Generator","og_description":"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","og_url":"https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-03-03T10:01:54+00:00","article_modified_time":"2025-04-03T17:42:33+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/on-off-flip-switch-generator\/user-interface.jpg","type":"","width":"","height":""}],"author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"Create CSS3 Toggle Button With On\/Off FlipSwitch Generator","datePublished":"2014-03-03T10:01:54+00:00","dateModified":"2025-04-03T17:42:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/"},"wordCount":586,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/on-off-flip-switch-generator\/user-interface.jpg","keywords":["CSS","CSS Tools"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/","url":"https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/","name":"Create CSS3 Toggle Button With On\/Off FlipSwitch Generator - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/on-off-flip-switch-generator\/user-interface.jpg","datePublished":"2014-03-03T10:01:54+00:00","dateModified":"2025-04-03T17:42:33+00:00","description":"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","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/on-off-flip-switch-generator\/user-interface.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/on-off-flip-switch-generator\/user-interface.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/on-off-flip-switch-generator\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create CSS3 Toggle Button With On\/Off FlipSwitch Generator"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-53D","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19445","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=19445"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19445\/revisions"}],"predecessor-version":[{"id":73661,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/19445\/revisions\/73661"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=19445"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=19445"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=19445"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=19445"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}