Checkbox style : demo 8

HTML

(Icon Fonts Used : Fontawesome & CSS Framwork: Bootstrap)
                        
                        

CSS

                        .checkbox{
                            width: 60px;
                            height: 27px;
                            position: relative;
                            margin: 0 auto;
                        }
                        .checkbox:after{
                            content: '';
                            background: #2F2F2B;
                            height: 5px;
                            border-radius: 5px;
                            transform: translateY(-50%);
                            position: absolute;
                            top: 50%;
                            left: 5px;
                            right: 5px;
                        }
                        .checkbox input[type=checkbox]{
                            margin: 0;
                            visibility: hidden;
                            left: 7px;
                            top: 7px;
                        }
                        .checkbox label{
                            background:#2F2F2B;
                            height: 27px;
                            width: 27px;
                            border-radius: 50%;
                            overflow: hidden;
                            cursor: pointer;
                            position: relative;
                            z-index: 1;
                            transition: all 0.25s ease 0s;
                        }
                        .checkbox label:before{
                            content: "";
                            background: #FF7129;
                            width: 14px;
                            height: 14px;
                            border-radius: 50%;
                            transform: translateX(-100%) translateY(-50%) scale(0);
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transition: all 0.25s ease 0s;
                        }
                        .checkbox input[type=checkbox]:checked+label{ transform: translateX(30px); }
                        .checkbox input[type=checkbox]:checked+label:before{
                            transform: translateX(-50%) translateY(-50%) scale(1);
                        }
                        @media only screen and (max-width:767px){
                            .checkbox{ margin: 0 0 20px; }
                        }
                    
License Terms