Checkbox style : demo 4

                        .checkbox{
                            width: 50px;
                            height: 25px;
                            margin: 0 auto;
                            position: relative;
                        }
                        .checkbox:before{
                            content: '';
                            background-color: #1d4741;
                            width: 100%;
                            height: 7px;
                            border-radius: 10px;
                            transform: translateY(-50%);
                            position: absolute;
                            top: 50%;
                            left: 0;
                            transition: all 0.3s ease 0s;
                        }
                        .checkbox input[type=checkbox]{
                            margin: 0;
                            visibility: hidden;
                            left: 7px;
                            top: 7px;
                        }
                        .checkbox label{
                            background-color: #1d4741;
                            height: 25px;
                            width: 25px;
                            border-radius: 50%;
                            cursor: pointer;
                            position: absolute;
                            top: 0;
                            left: 0;
                            transition: all .3s ease;
                            animation: pulsein .3s;
                        }
                        .checkbox input[type=checkbox]:checked+label{
                            background-color: #10C298;
                            transform: translateX(25px);
                            animation: pulseout 0.3s;
                        }
                        @keyframes pulsein{
                            0%,100%{
                                height: 25px;
                                width: 25px;
                                top: 0px;
                            }
                            50%{
                                height: 19px;
                                width: 35px;
                                top: 3px;
                            }
                        }
                        @keyframes pulseout{
                            0%, 100%{
                                height: 25px;
                                width: 25px;
                                top: 0px;
                            }
                            50%{
                                height: 19px;
                                width: 35px;
                                top: 3px;
                            }
                        }
                        @media only screen and (max-width:767px){
                            .checkbox{ margin: 0 0 20px; }
                        }