Toggle button

by andyjmeyers

HTML

<label for='chk'> Toggle Me:
</label>
    <span class='toggleContainer'>
        
        <input class='toggleInput' type='checkbox' id='chk'></input>
        <span class='background'></span>
        <label class='slider' for='chk'></label>
        <label class='on' for='chk'>On</label>
        <label class='off' for='chk'>Off</label>
        

    </span>

SCSS

body{
 background-color: #141219;
    color: white;
}


.toggleContainer{
    border: 1px solid white;
    border-radius:6px;
    display:inline-block;
    width:50px;
    height:20px;
        
    position: relative; 
     overflow:hidden;
    
    .background{
        position:absolute;
        width: 100%;
        height:100%;
        border-radius:6px;
        background-color:red;
        opacity:.2;
        -moz-transition: background-color .3s;
        -webkit-transition: background-color .3s;
        transition: background-color .3s;
    }
    
    .toggleInput{
        position: absolute;
        opacity: 0;
        & ~ .off, & ~.on{
            width:50%;
            position: relative;
            z-index:10;
            display:inline-block;
            overflow:hidden;
            height:100%;
            top:50%;
            margin-top:-8px; /*half the font height */
        }
        
        & ~ .slider{
            position:absolute;
            width:45%;
            height:100%;
            content:"";
            background-color:white;
            border-radius:6px;
            display:inline-block;
            z-index:1;
            left:0;
            -moz-transition: left .3s;
            -webkit-transition: left .3s;
            transition: left .3s;
        }
   
        & ~ .off{
            right: 0;
            -moz-transition: right .3s;
            -webkit-transition: right .3s;
            transition: right .3s;
            float:right;
            color: red;
            
        }
        & ~ .on{
            left: -50%;
            float:left;
            -moz-transition: left .3s;
            -webkit-transition: left .3s;
            transition: left .3s;
            color: green;
            
        }
    }
    
    .toggleInput:checked{

        & ~ .background{
            background-color:green;
            -moz-transition: background-color .3s;
            -webkit-transition: background-color .3s;
            transition:...