.switch input {
    display:none;
}
.switch {
    display:inline-block;
    width:53px;
    height:24px;
    margin:0 8px 8px 1px;
    padding: 0 15px;
    /* transform:translateY(50%); */
    position:relative;
}

.slider {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    border-radius:30px;
    box-shadow: 0 0 0 1px #ccc, 0 0 2px #ddd;
    cursor:pointer;
    border:4px solid transparent;
    overflow:hidden;
    transition:.4s;
}
.slider:before {
    position:absolute;
    content:"";
    width:100%;
    height:100%;
    background:#777;
    border-radius:30px;
    transform:translateX(-30px);
    transition:.4s;
}

input:checked + .slider:before {
    transform:translateX(30px);
    background:limeGreen;
}
input:checked + .slider {
    box-shadow:0 0 0 1px #28a745, 0 0 2px #9cce9c;
}