<div>
    <label class="switch">
        <input type="checkbox">
        <span>
            <em></em>
            <strong></strong>
        </span>
    </label>
    <label class="switch">
        <input type="checkbox" checked>
        <span>
            <em></em>
            <strong></strong>
        </span>
    </label>
</div>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/5436550-Lock-switch-animation" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>

$primary: #5628EE;
$lightGrey: #99A3BA;

.switch {
    height: 24px;
    display: block;
    position: relative;
    cursor: pointer;
    input {
        display: none;
        & + span {
            padding-left: 50px;
            min-height: 24px;
            line-height: 24px;
            display: block;
            color: $lightGrey;
            position: relative;
            vertical-align: middle;
            white-space: nowrap;
            transition: color .3s ease;
            &:before,
            &:after {
                content: '';
                display: block;
                position: absolute;
                border-radius: 12px;
            }
            &:before {
                top: 0;
                left: 0;
                width: 42px;
                height: 24px;
                background: #E4ECFA;
                transition: all .3s ease;
            }
            &:after {
                width: 18px;
                height: 18px;
                background: #fff;
                top: 3px;
                left: 3px;
                box-shadow: 0 1px 3px rgba(#121621, .1);
                transition: all .45s ease;
            }
            em {
                width: 8px;
                height: 7px;
                background: $lightGrey;
                position: absolute;
                left: 8px;
                bottom: 7px;
                border-radius: 2px;
                display: block;
                z-index: 1;
                transition: all .45s ease;
                &:before {
                    content: '';
                    width: 2px;
                    height: 2px;
                    border-radius: 1px;
                    background: #fff;
                    position: absolute;
                    display: block;
                    left: 50%;
                    top: 50%;
                    margin: -1px 0 0 -1px;
                }
                &:after {
                    content: '';
                    display: block;
                    border-top-left-radius: 4px;
                    border-top-right-radius: 4px;
                    border: 1px solid $lightGrey;
                    border-bottom: 0;
                    width: 6px;
                    height: 4px;
                    left: 1px;
                    bottom: 6px;
                    position: absolute;
                    z-index: 1;
                    transform-origin: 0 100%;
                    transition: all .45s ease;
                    transform: rotate(-35deg) translate(0, 1px);
                }
            }
            strong {
                font-weight: normal;
                position: relative;
                display: block;
                top: 1px;
                &:before,
                &:after {
                    font-size: 14px;
                    font-weight: 500;
                    display: block;
                    font-family: 'Mukta Malar', Arial;
                    -webkit-backface-visibility: hidden;
                }
                &:before {
                    content: 'Unlocked';
                    transition: all .3s ease .2s;
                }
                &:after {
                    content: 'Locked';
                    opacity: 0;
                    visibility: hidden;
                    position: absolute;
                    left: 0;
                    top: 0;
                    color: $primary;
                    transition: all .3s ease;
                    transform: translate(2px, 0);
                }
            }
        }
        &:checked {
            & + span {
                &:before {
                    background: rgba($primary, .35);
                }
                &:after {
                    background: #fff;
                    transform: translate(18px, 0);
                }
                em {
                    transform: translate(18px, 0);
                    background: $primary;
                    &:after {
                        border-color: $primary;
                        transform: rotate(0deg) translate(0, 0);
                    }
                }
                strong {
                    &:before {
                        opacity: 0;
                        visibility: hidden;
                        transition: all .3s ease;
                        transform: translate(-2px, 0);
                    }
                    &:after {
                        opacity: 1;
                        visibility: visible;
                        transform: translate(0, 0);
                        transition: all .3s ease .2s;
                    }
                }
            }
        }
    }
}

html {
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: border-box;
    &:before,
    &:after {
        box-sizing: border-box;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    font-family: 'Mukta Malar', Arial;
    line-height: 22px;
    font-size: 16px;
    color: #ADAFB6;
    display: flex;
    justify-content: center;
    align-items: center;
    .switch {
        display: table;
        margin: 12px auto;
        min-width: 118px;
    }
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
}