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.
How do you get the value from the selected switch or How do I know which is the active state of the Switch?