<label class="switch">
    <input type="checkbox">
    <span></span>
</label>

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

$red: #FF4651;
$green: #48EA8B;

.switch {
    cursor: pointer;
    input {
        display: none;
        & + span {
            width: 48px;
            height: 28px;
            border-radius: 14px;
            transition: all .3s ease;
            display: block;
            position: relative;
            background: $red;
            box-shadow: 0 8px 16px -1px rgba($red, .2);
            &:before,
            &:after {
                content: '';
                display: block;
                position: absolute;
                transition: all .3s ease;
            }
            &:before {
                top: 5px;
                left: 5px;
                width: 18px;
                height: 18px;
                border-radius: 9px;
                border: 5px solid #fff;
            }
            &:after {
                top: 5px;
                left: 32px;
                width: 6px;
                height: 18px;
                border-radius: 40%;
                transform-origin: 50% 50%;
                background: #fff;
                opacity: 0;
            }
            &:active {
                transform: scale(.92);
            }
        }
        &:checked {
            & + span {
                background: $green;
                box-shadow: 0 8px 16px -1px rgba($green, .2);
                &:before {
                    width: 0px;
                    border-radius: 3px;
                    margin-left: 27px;
                    border-width: 3px;
                    background: #fff;
                }
                &:after {
                    animation: blobChecked .35s linear forwards .2s;
                }
            }
        }
        &:not(:checked) {
            & + span {
                &:before {
                    animation: blob .85s linear forwards .2s;
                }
            }
        }
    }
}

@keyframes blob {
    0%, 100% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.12, .94);
    }
    60% {
        transform: scale(.96, 1.06);
    }
}

@keyframes blobChecked {
    0% {
        opacity: 1;
        transform: scaleX(1);
    }
    30% {
        transform: scaleX(1.44);
    }
    70% {
        transform: scaleX(1.18);
    }
    50%,
    99% {
        transform: scaleX(1);
        opacity: 1;
    }
    100% {
        transform: scaleX(1);
        opacity: 0;
    }
}

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

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

// Center & dribbble
body {
    min-height: 100vh;
    font-family: Roboto, Arial;
    color: #ADAFB6;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F5F9FF;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
}