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">
<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.
