<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="wrapper"> <div class="switch_box box_1"> <input type="checkbox" class="switch_1"> </div> <div class="switch_box box_2"> <input type="checkbox" class="switch_2"> </div> <div class="switch_box box_3"> <div class="toggle_switch"> <input type="checkbox" class="switch_3"> <svg class="checkbox" xmlns="http://www.w3.org/2000/svg" style="isolation:isolate" viewBox="0 0 168 80"> <path class="outer-ring" d="M41.534 9h88.932c17.51 0 31.724 13.658 31.724 30.482 0 16.823-14.215 30.48-31.724 30.48H41.534c-17.51 0-31.724-13.657-31.724-30.48C9.81 22.658 24.025 9 41.534 9z" fill="none" stroke="#233043" stroke-width="3" stroke-linecap="square" stroke-miterlimit="3"/> <path class="is_checked" d="M17 39.482c0-12.694 10.306-23 23-23s23 10.306 23 23-10.306 23-23 23-23-10.306-23-23z"/> <path class="is_unchecked" d="M132.77 22.348c7.705 10.695 5.286 25.617-5.417 33.327-2.567 1.85-5.38 3.116-8.288 3.812 7.977 5.03 18.54 5.024 26.668-.83 10.695-7.706 13.122-22.634 5.418-33.33-5.855-8.127-15.88-11.474-25.04-9.23 2.538 1.582 4.806 3.676 6.66 6.25z"/> </svg> </div> </div> <div class="switch_box box_4"> <div class="input_wrapper"> <input type="checkbox" class="switch_4"> <svg class="is_checked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426.67 426.67"> <path d="M153.504 366.84c-8.657 0-17.323-3.303-23.927-9.912L9.914 237.265c-13.218-13.218-13.218-34.645 0-47.863 13.218-13.218 34.645-13.218 47.863 0l95.727 95.727 215.39-215.387c13.218-13.214 34.65-13.218 47.86 0 13.22 13.218 13.22 34.65 0 47.863L177.435 356.928c-6.61 6.605-15.27 9.91-23.932 9.91z"/> </svg> <svg class="is_unchecked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212.982 212.982"> <path d="M131.804 106.49l75.936-75.935c6.99-6.99 6.99-18.323 0-25.312-6.99-6.99-18.322-6.99-25.312 0L106.49 81.18 30.555 5.242c-6.99-6.99-18.322-6.99-25.312 0-6.99 6.99-6.99 18.323 0 25.312L81.18 106.49 5.24 182.427c-6.99 6.99-6.99 18.323 0 25.312 6.99 6.99 18.322 6.99 25.312 0L106.49 131.8l75.938 75.937c6.99 6.99 18.322 6.99 25.312 0 6.99-6.99 6.99-18.323 0-25.313l-75.936-75.936z" fill-rule="evenodd" clip-rule="evenodd"/> </svg> </div> </div> </div> </div>

.wrapper{ display: -webkit-box; display: -ms-flexbox; display: flex; width: 400px; margin: 50vh auto 0; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .switch_box{ display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 200px; min-width: 200px; height: 200px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } /* Switch 1 Specific Styles Start */ .box_1{ background: #eee; } input[type="checkbox"].switch_1{ font-size: 30px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 3.5em; height: 1.5em; background: #ddd; border-radius: 3em; position: relative; cursor: pointer; outline: none; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } input[type="checkbox"].switch_1:checked{ background: #0ebeff; } input[type="checkbox"].switch_1:after{ position: absolute; content: ""; width: 1.5em; height: 1.5em; border-radius: 50%; background: #fff; -webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3); box-shadow: 0 0 .25em rgba(0,0,0,.3); -webkit-transform: scale(.7); transform: scale(.7); left: 0; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } input[type="checkbox"].switch_1:checked:after{ left: calc(100% - 1.5em); } /* Switch 1 Specific Style End */ /* Switch 2 Specific Style Start */ .box_2{ background: #666; } input[type="checkbox"].switch_2{ -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100px; height: 8px; background: #444; border-radius: 5px; position: relative; outline: 0; cursor: pointer; } input[type="checkbox"].switch_2:before, input[type="checkbox"].switch_2:after{ position: absolute; content: ""; -webkit-transition: all .25s; transition: all .25s; } input[type="checkbox"].switch_2:before{ width: 40px; height: 40px; background: #ccc; border: 5px solid #666; border-radius: 50%; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } input[type="checkbox"].switch_2:after{ width: 30px; height: 30px; background: #666; border-radius: 50%; top: 50%; left: 10px; -webkit-transform: scale(1) translateY(-50%); transform: scale(1) translateY(-50%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } input[type="checkbox"].switch_2:checked:before{ left: calc(100% - 35px); } input[type="checkbox"].switch_2:checked:after{ left: 75px; -webkit-transform: scale(0); transform: scale(0); } /* Switch 2 Specific Style End */ /* Switch 3 Specific Style Start */ .box_3{ background: #19232b; } .toggle_switch{ width: 100px; height: 45px; position: relative; } input[type="checkbox"].switch_3{ -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; cursor: pointer; outline: 0; z-index: 1; } svg.checkbox .outer-ring{ stroke-dasharray: 375; stroke-dashoffset: 375; -webkit-animation: resetRing .35s ease-in-out forwards; animation: resetRing .35s ease-in-out forwards; } input[type="checkbox"].switch_3:checked + svg.checkbox .outer-ring{ -webkit-animation: animateRing .35s ease-in-out forwards; animation: animateRing .35s ease-in-out forwards; } input[type="checkbox"].switch_3:checked + svg.checkbox .is_checked{ opacity: 1; -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); } input[type="checkbox"].switch_3:checked + svg.checkbox .is_unchecked{ opacity: 0; -webkit-transform: translateX(-200%) rotate(180deg); transform: translateX(-200%) rotate(180deg); } svg.checkbox{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; } svg.checkbox .is_checked{ opacity: 0; fill: yellow; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translateX(200%) rotate(45deg); transform: translateX(200%) rotate(45deg); -webkit-transition: all .35s; transition: all .35s; } svg.checkbox .is_unchecked{ opacity: 1; fill: #fff; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translateX(0) rotate(0deg); transform: translateX(0) rotate(0deg); -webkit-transition: all .35s; transition: all .35s; } @-webkit-keyframes animateRing{ to{ stroke-dashoffset: 0; stroke: #b0aa28; } } @keyframes animateRing{ to{ stroke-dashoffset: 0; stroke: #b0aa28; } } @-webkit-keyframes resetRing{ to{ stroke-dashoffset: 0; stroke: #233043; } } @keyframes resetRing{ to{ stroke-dashoffset: 0; stroke: #233043; } } /* Switch 3 Specific Style End */ /* Switch 4 Specific Style Start */ .box_4{ background: #eee; } .input_wrapper{ width: 80px; height: 40px; position: relative; cursor: pointer; } .input_wrapper input[type="checkbox"]{ width: 80px; height: 40px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #315e7f; border-radius: 2px; position: relative; outline: 0; -webkit-transition: all .2s; transition: all .2s; } .input_wrapper input[type="checkbox"]:after{ position: absolute; content: ""; top: 3px; left: 3px; width: 34px; height: 34px; background: #dfeaec; z-index: 2; border-radius: 2px; -webkit-transition: all .35s; transition: all .35s; } .input_wrapper svg{ position: absolute; top: 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; fill: #fff; -webkit-transition: all .35s; transition: all .35s; z-index: 1; } .input_wrapper .is_checked{ width: 18px; left: 18%; -webkit-transform: translateX(190%) translateY(-30%) scale(0); transform: translateX(190%) translateY(-30%) scale(0); } .input_wrapper .is_unchecked{ width: 15px; right: 10%; -webkit-transform: translateX(0) translateY(-30%) scale(1); transform: translateX(0) translateY(-30%) scale(1); } /* Checked State */ .input_wrapper input[type="checkbox"]:checked{ background: #23da87; } .input_wrapper input[type="checkbox"]:checked:after{ left: calc(100% - 37px); } .input_wrapper input[type="checkbox"]:checked + .is_checked{ -webkit-transform: translateX(0) translateY(-30%) scale(1); transform: translateX(0) translateY(-30%) scale(1); } .input_wrapper input[type="checkbox"]:checked ~ .is_unchecked{ -webkit-transform: translateX(-190%) translateY(-30%) scale(0); transform: translateX(-190%) translateY(-30%) scale(0); } /* Switch 4 Specific Style End */