Thursday 5 May 2016

Stylish Switch Button using CSS3 and Jquery


Source Code




 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Stylish Switch Button using CSS3 and Jquery</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
           <style>  
           .wrapper{  
                width:500px;  
                margin:0 auto;  
           }  
           .switch{  
                width:200px;  
                height:100px;  
                background:#E5E5E5;  
                z-index:0;  
                margin:0;  
                padding:0;  
                appearance:none;  
                border:none;  
                cursor:pointer;  
                position:relative;  
                border-radius:100px;  
           }  
           .switch:before{  
                content: ' ';  
                position:absolute;  
                left:5px;  
                top:5px;  
                width:190px;  
                height:90px;  
                background:#FFFFFF;  
                z-index:1;  
                border-radius:95px;  
           }  
           .switch:after{  
                content:' ';  
                width:88px;  
                height:88px;  
                border-radius:86px;  
                z-index:2;  
                background:#FFFFFF;  
                position:absolute;  
                transition-duration:500ms;  
                top:6px;  
                left:6px;  
                box-shadow:0 2px 5px #999999;  
           }  
           .switchOn, .switchOn:before{  
                background:#4cd964; !important;  
           }  
           .switchOn:after{  
                left:105px;   
           }  
           </style>  
           <script>  
           $(document).ready(function(){  
                $('.switch').click(function(){  
                     $(this).toggleClass("switchOn");  
                });  
           });  
           </script>  
      </head>  
      <body>  
           <div class="wrapper" align="center">  
                <br />  
                <label>  
                     <input type="checkbox" name="switch" class="checkbox" />  
                     <div class="switch"></div>  
                </label>  
                <br />  
           </div>  
      </body>  
 </html>  

0 comments:

Post a Comment