Checkbox style : demo 11

HTML

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

CSS

                        .checkbox{ display: inline-block; }
                        .checkbox input[type=checkbox]{
                            margin: 0;
                            visibility: hidden;
                            left: 1px;
                            top: 1px;
                        }
                        .checkbox label{
                            background: #072a54;
                            width: 20px;
                            height: 20px;
                            cursor: pointer;
                            display: block;
                            position: relative;
                            transition: 0.4s ease all;
                        }
                        .checkbox label:before{
                            content: "\f00c";
                            color: #fff;
                            font-family: "Font Awesome 5 Free";
                            font-size: 14px;
                            font-weight: 900;
                            opacity: 0;
                            transform: translateX(-50%) translateY(-50%);
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transition: all 0.3s;
                        }
                        .checkbox label:after{
                            content: "";
                            background:#689937;
                            transform: translateX(-50%) translateY(-50%);
                            position: absolute;
                            top: 50%;
                            left: 50%;
                        }
                        .checkbox input[type=checkbox]:checked+label{ background: #689937; }
                        .checkbox input[type=checkbox]:checked+label:before{ opacity: 1; }
                        .checkbox input[type=checkbox]:checked+label:after{ animation: shadow 0.5s; }
                        .checkbox input[type=checkbox]{ visibility: hidden; }
                        @keyframes shadow{
                            0%{
                                height: 20px;
                                width: 20px;
                                opacity: 0.5;
                            }
                            100%{
                                height: 40px;
                                width: 40px;
                                opacity: 0;
                            }
                        }
                        @media only screen and (max-width:767px){
                            .checkbox{ margin: 0 0 20px; }
                        }
                    
License Terms