Skip to main content
Custom toggle switch with pure HTML, CSS and JQuery with smooth transition
- <!DOCTYPE html>
- <html>
- <head>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
- <script>
- $(document).ready(function(){
- $("#outer").click(function(){
- if($("#inner").css('margin-left') == '1px')
- {
- $("#inner").css('margin-left','34px');
- $("#inner").html('ON');
- }
- else
- {
- $("#inner").css('margin-left','1px');
- $("#inner").html('OFF');
- }
- });
- });
- </script>
- <style>
- #outer, #inner {
- cursor:pointer;
- border-radius:5px;
- text-align: center;
- color:#FFF;
- height:18px;
- transition-property: margin-left;
- transition-duration: 0.25s;
- transition-timing-function: linear;
- }
- </style>
- </head>
- <body>
- <div id="outer" style="width:70px;background: rgb(188, 188, 188);"> <div id="inner" style="margin-left:1px;width:35px;background: rgb(0, 102, 153);">OFF</div> </div>
- </body>
- </html>
Comments
Post a Comment