.al-toggle-button{

            appearance: none;

            -webkit-appearance: none;

            position: relative;

            width: 52px;

            height: 32px;

            background: #dfdfdf;

            border-radius: 16px;

            border: 1px solid #dfdfdf;

            outline:;

            box-sizing: border-box;

        }

        .al-toggle-button:checked{

            border-color: #04be02;

            background-color: #04be02;

        }

        .al-toggle-button:before, .al-toggle-button:after{

            content: " ";

            position: absolute;

            top:;

            left:;

            height: 30px;

            border-radius: 15px;

            transition: transform 0.3s;

            transition: -webkit-transform 0.3s;

            transition: transform 0.3s, -webkit-transform 0.3s;

            -webkit-transition: -webkit-transform 0.3s;

        }

        .al-toggle-button:before{

            width: 50px;

            background-color: #fdfdfd;

        }

        .al-toggle-button:after{

            width: 30px;

            background-color: white;

            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

        }

        .al-toggle-button:checked:before{

            transform: scale(0);

            -webkit-transform: scale(0);

        }

        .al-toggle-button:checked:after{

            transform: translateX(20px);

            -webkit-transform: translateX(20px);

        }

<input type="checkbox" class="al-toggle-button">