<body>
  <div class="container">
    <h2>Switch - toggle button</h2>
    <div class="switch">
      <label for="switch">ON/OFF</label>
      <span data-value="switchOn"></span>
    </div>
  </div>
</body>
body {
  background-color: white;
}
/*switch*/
.switch {
    * {
        -webkit-transition: .2s;
        -moz-transition: .2s;
        transition: .2s;
        font-size: 12px;
        vertical-align: middle;
    }
    > {
        input[type="checkbox"] {
          display:none;
        }
        label[for="switch"] {
          margin-bottom: 0;
          font-weight: 500;
          font-size: 16px;
        }
        span{
            position: relative;
            display: inline-block;
            padding: 1px;
            width: 55px;
            height: 28px;
            vertical-align: middle;
            background: #444;
            background-size: 100%;
            cursor: pointer;
            border-radius: 50px;
            border: solid .5px #555;
            nav{
                -webkit-transition: .5s;
                -moz-transition: .5s;
                transition: .5s;
                width: 25px;
                height: 25px;
                margin: 2px 1px auto;
                border-radius: 100%;
                background-color: #FFF;
                left: 0;
                box-shadow: 1.5px 0px 2px #111;
            }
        }
    }
    &[checked] {
        > {
            span{
                background: #13C100;
                border: solid .5px #19A309;
                nav {
                    -webkit-transition: .5s;
                    -moz-transition: .5s;
                    transition: .5s;
                    position: absolute;
                    left: calc(100% - 27px);
                    box-shadow: -1.5px 0px 2px #555;
                }
            }
        }
    }
}
View Compiled
$('.switch').each(function(){
    $('span[data-value]',this).append('<nav></nav>')
    $('span[data-value]',this).on('click',function(){
        (!$(this).parent().attr('checked'))?$(this).parent().attr('checked','checked'):$(this).parent().removeAttr('checked')
    })
})
Run Pen

External CSS

  1. https://codepen.io/chiedevdimla/pen/gOapePL.scss

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js