CSS Flip Switch
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 
Let’s first start by looking at the HTML source code that is used.
<div class="flipswitch"><div class="flipswitch"> <input type="checkbox" name="flipswitch" class="flipswitch-cb" id="fs" checked> <label class="flipswitch-label" for="fs"> <div class="flipswitch-inner"></div> <div class="flipswitch-switch"></div> </label> </div>
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.
.flipswitch {
position: relative;
width: 86px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
.flipswitch input[type=checkbox] {
display: none;
}
.flipswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 50px;
}
.flipswitch-inner {
width: 200%;
margin-left: -100%;
-webkit-transition: margin 0.3s ease-in 0s;
-moz-transition: margin 0.3s ease-in 0s;
-ms-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
.flipswitch-inner:before, .flipswitch-inner:after {
float: left;
width: 50%;
height: 24px;
padding: 0;
line-height: 24px;
font-size: 18px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.flipswitch-inner:before {
content: "ON";
padding-left: 12px;
background-color: #256799;
color: #FFFFFF;
}
.flipswitch-inner:after {
content: "OFF";
padding-right: 12px;
background-color: #EBEBEB;
color: #888888;
text-align: right;
}
.flipswitch-switch {
width: 31px;
margin: -3.5px;
background: #FFFFFF;
border: 2px solid #999999;
border-radius: 50px;
position: absolute;
top: 0;
bottom: 0;
right: 59px;
-webkit-transition: all 0.3s ease-in 0s;
-moz-transition: all 0.3s ease-in 0s;
-ms-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-inner {
margin-left: 0;
}
.flipswitch-cb:checked + .flipswitch-label .flipswitch-switch {
right: 0;
}
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.
Or have a look at this example in our CSS Playground by clicking on the link button below.
