HTML
CSS
JS
Result
HTML
<!DOCTYPE html> <html> <head> <title>iOS 7 Style Toggle Switch Button Using Switchery.js</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js" type="text/javascript"></script> </head> <body> <input type="checkbox" class="js-switch" checked /> </body> </html>
CSS
body{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
JS
var elem = document.querySelector('.js-switch'); var init = new Switchery(elem);
How to Create iOS 7 Style Toggle Switch Button Using Switchery.js?