I said earlier the mobile revolution has been started, now time to build mobile web application for your web projects. Many third party platforms like Apache Cordova and Phonegap are offering that you can convert web application into native mobile application. This tutorial will help you how to design iOS style switch button component using HTML, CSS and Jquery. Specially I love CSS :before and :after pseudo-elements, this helps you to minimize the HTML code.

Note:

For better result, use Chrome, Firefox and Safari browsers.Simple HTML code, you should include checkbox and switch DIV insidetag.

<label>

<input type=" checkbox " name=" checkboxName " class=" checkbox "/>

<div class=" switch "></div>

</label>

Simple HTML code,

.switch

{

width: 62 px;

height: 32 px;

background: #E5E5E5;

z-index: 0;

margin: 0;

padding: 0;

appearance: none;

border: none;

cursor: pointer ;

position: relative ;

border-radius: 16 px; //IE 11

-moz-border-radius: 16 px; //Mozilla

-webkit-border-radius: 16 px; //Chrome and Safari

}

After applying border-radius code.Theis a pseudo-element, insert style/content before DOM element.

.switch : before

{

content: ' ';

position: absolute ;

left: 1px;

top: 1px;

width: 60 px;

height: 30 px;

background: #FFFFFF;

z-index: 1;

border-radius: 16 px; //IE 11

-moz-border-radius: 16 px; //Mozilla

-webkit-border-radius: 16 px; //Chrome and Safari

}

Theis a pseudo-element, insert style/content after DOM element. Here transition duration helps to enrich animation effect.

.switch : after

{

content: ' ';

height: 29 px;

width: 29 px;

border-radius: 28px;

z-index: 2;

background: #FFFFFF;

position: absolute ;

-webkit-transition-duration: 300 ms;

transition-duration: 300 ms;

top: 1px;

left: 1px;

-webkit-box-shadow: 0 2px 5px #999999;

box-shadow: 0 2px 5px #999999;

}

Read more about Text Shadow Effects tutorial.Applying the background color to green and moving

.switchOn , .switchOn : before

{

background: #4cd964 !important;

}

.switchOn : after

{

left: 21px !important;

}

Contains JavaScript code,is the class name of the DIV. Using jquery toggleClass adding and removingclass based on click action.

<script src=" http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js "></script>

<script>

$(document). ready (function()

{



$(' .switch '). click (function()

{

$( this ). toggleClass (" switchOn ");

});



});

</script>

You can hide input checkbox using