CheckBox On/Off

Checkbox estilo on/off con efecto de traslado

HTML

<input type="checkbox" id="check" class="check-onoff">  
<label for="check" class="check-circle">
        <div class="container-label">
        <span class="on">ON</span>
        <span class="circle"></span>
        <span class="off">OFF</span>
        </div>
</label>

CSS

.check-onoff{
    position:absolute;
    left:-9999px;
    visibility:hidden;
}
.check-onoff + label{
    display:block;
    position:relative;
    width:110px;
    height:40px;
    background-color:#444444;
    border-radius:50px;
    padding:5px;
    overflow:hidden;
    transition:all .2s;
}
.check-onoff + label:hover{
    cursor:pointer;
}
.on, .circle, .off{
    display:inline-block;
    color:white;
    font-family:Raleway;
    box-sizing:border-box;
    line-height: 1.7em;
    font-size:1.5em;
}
.on{
    position:absolute;
    width:100%;
    padding-left:15px;
    visibility:hidden;

}
.circle{
    position:absolute;
    width:40px;
    height:40px;
    border-radius:50%;
    left:0;
    right:0;
    background-color:white;
    z-index:9999;
        transition:all .2s;

}
.off{
    position:absolute;
    width:100%;
    height:100%;
    padding-right:15px;
    text-align:right;

}
.container-label{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
}

.check-onoff:checked + label > .on{
    background-color:red;
}

.container-label{
    position:relative;
    width:100%;
    height:100%;
    border-radius:50px;
}

.check-onoff:checked + label{
    background-color:#315da6;
}
.check-onoff:checked + label > .container-label > .off{
    visibility:hidden;
}
.check-onoff:checked + label > .container-label >  .on{
    visibility:visible;
}
.check-onoff:checked + label > .container-label >  .circle{
    left:63%;

}