{"id":275,"date":"2015-02-15T00:43:11","date_gmt":"2015-02-15T00:43:11","guid":{"rendered":"http:\/\/www.cssportal.com\/blog\/?p=275"},"modified":"2024-02-28T23:28:44","modified_gmt":"2024-02-28T23:28:44","slug":"css-flip-switch","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/css-flip-switch\/","title":{"rendered":"CSS Flip Switch"},"content":{"rendered":"

You will see on a lot of pages these days, developers are using fancy CSS flip \/ toggle switches instead of plain option buttons. This post will show you how to make a basic CSS flip switch, you will then be able to create your own flip switches with ease…or you can just use our CSS flip switch generator<\/a> \ud83d\ude42
\n
\n\"off\"\u00a0\u00a0\u00a0\u00a0 \"on\"<\/p>\n

Let’s first start by looking at the HTML source code that is used.<\/p>\n

<div class="flipswitch">\r\n\t<input type="checkbox" name="flipswitch" class="flipswitch-cb" id="fs" checked>\r\n\t<label class="flipswitch-label" for="fs">\r\n\t\t<div class="flipswitch-inner"><\/div>\r\n\t\t<div class="flipswitch-switch"><\/div>\r\n\t<\/label>\r\n<\/div><\/code><\/pre>\n
If we stopped now without adding any CSS, we would only have a plain checkbox, so to style we now add the following CSS code to give it a bit of class.<\/p>\n
.flipswitch {\r\n  position: relative;\r\n  width: 86px;\r\n  -webkit-user-select:none;\r\n  -moz-user-select:none;\r\n  -ms-user-select: none;\r\n}\r\n.flipswitch input[type=checkbox] {\r\n  display: none;\r\n}\r\n.flipswitch-label {\r\n  display: block;\r\n  overflow: hidden;\r\n  cursor: pointer;\r\n  border: 2px solid #999999;\r\n  border-radius: 50px;\r\n}\r\n.flipswitch-inner {\r\n  width: 200%;\r\n  margin-left: -100%;\r\n  -webkit-transition: margin 0.3s ease-in 0s;\r\n  -moz-transition: margin 0.3s ease-in 0s;\r\n  -ms-transition: margin 0.3s ease-in 0s;\r\n  -o-transition: margin 0.3s ease-in 0s;\r\n  transition: margin 0.3s ease-in 0s;\r\n}\r\n.flipswitch-inner:before, .flipswitch-inner:after {\r\n  float: left;\r\n  width: 50%;\r\n  height: 24px;\r\n  padding: 0;\r\n  line-height: 24px;\r\n  font-size: 18px;\r\n  color: white;\r\n  font-family: Trebuchet, Arial, sans-serif;\r\n  font-weight: bold;\r\n  -moz-box-sizing: border-box;\r\n  -webkit-box-sizing: border-box;\r\n  box-sizing: border-box;\r\n}\r\n.flipswitch-inner:before {\r\n  content: \"ON\";\r\n  padding-left: 12px;\r\n  background-color: #256799;\r\n  color: #FFFFFF;\r\n}\r\n.flipswitch-inner:after {\r\n  content: \"OFF\";\r\n  padding-right: 12px;\r\n  background-color: #EBEBEB;\r\n  color: #888888;\r\n  text-align: right;\r\n}\r\n.flipswitch-switch {\r\n  width: 31px;\r\n  margin: -3.5px;\r\n  background: #FFFFFF;\r\n  border: 2px solid #999999;\r\n  border-radius: 50px;\r\n  position: absolute;\r\n  top: 0;\r\n  bottom: 0;\r\n  right: 59px;\r\n  -webkit-transition: all 0.3s ease-in 0s;\r\n  -moz-transition: all 0.3s ease-in 0s;\r\n  -ms-transition: all 0.3s ease-in 0s;\r\n  -o-transition: all 0.3s ease-in 0s;\r\n  transition: all 0.3s ease-in 0s;\r\n}\r\n.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {\r\n  margin-left: 0;\r\n}\r\n.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {\r\n  right: 0;\r\n}\r\n<\/code><\/pre>\n
Well that’s about all for this post, if you would like to create different CSS flip switches, you can use our CSS flip switch generator<\/a>.
\nOr have a look at this example in our CSS Playground by clicking on the link button below.<\/p>\n
Demo<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
You will see on a lot of pages these days, developers are using fancy CSS flip \/ toggle switches instead of plain option buttons. This post will show you how to make a basic CSS flip switch, you will then be able to create your own flip switches with ease…or you can just use our […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-275","post","type-post","status-publish","format-standard","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=275"}],"version-history":[{"count":4,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/275\/revisions"}],"predecessor-version":[{"id":553,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/275\/revisions\/553"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}