<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <br /> <br /> <br /> <br /> <br /> <div class="material-switch pull-right"> <input type="checkbox" id="toggle-switch" name="toggle-switch" ng-model="enabled" ng-click="handleClick()" class="material-switch__checkbox"/> <label for="toggle-switch" class="material-switch__toggle"></label> </div> </div>

input[type=checkbox] { display: none; } .switch-container { float: right; margin-top: -25px; } .material-switch__toggle { position: relative; margin: 0 !important; width: 45px !important; height: 15px !important; background: #f0f0f0 !important; border-radius: 15px; } .material-switch__toggle::after { content: ''; transition: all 0.5s ease-out; display: block; width: 20px; height: 20px; background: #fff; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); margin-top: -2px; border-radius: 10px; transform: translateX(0); } .material-switch__checkbox:checked ~ .material-switch__toggle { } .material-switch__checkbox:checked ~ .material-switch__toggle::after { transform: translateX(150%); width: 20px; height: 20px; background-color: #5bc0de; }