Checkbox style : demo 13

                        .checkbox{ display: inline-block; }
                        .checkbox input[type=checkbox]{
                            margin: 0;
                            visibility: hidden;
                            left: 1px;
                            top: 1px;
                        }
                        .checkbox label{
                            background: #555;
                            width: 20px;
                            height: 20px;
                            cursor: pointer;
                            border-radius: 5px;
                            display: block;
                            position: relative;
                        }
                        .checkbox label:before{
                            color: #fff;
                            content: "\f00c";
                            font-family: "Font Awesome 5 Free";
                            font-weight: 900;
                            font-size: 13px;
                            opacity: 0;
                            transform: translateX(-50%) translateY(-50%) scale(1);
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transition: all 200ms ease-in-out 400ms;
                        }
                        .checkbox input[type=checkbox]:checked+label{
                            background: #ff4757;
                            animation: animOnTransform 1s 1 forwards;
                        }
                        .checkbox input[type=checkbox]:checked+label:before{
                            opacity: 1;
                            transform: translateX(-50%) translateY(-50%) scale(1);
                        }
                        @keyframes animOnTransform{
                            40%{ transform: scale(1.5, 0.5); }
                            50%{ transform: scale(0.5, 1.5); }
                            60%{ transform: scale(1.3, 0.6); }
                            70%{ transform: scale(0.8, 1.2); }
                            100%{ transform: scale(1, 1); }
                        }

                        @keyframes animOn{
                            40%{
                                height: 20px;
                                width: 100px;
                            }
                            50%{
                                height: 60px;
                                width: 30px;
                            }
                            60%{
                                height: 40px;
                                width: 70px;
                            }
                            70%{
                                height: 55px;
                                width: 45px;
                            }
                            100%{
                                height: 50px;
                                width: 50px;
                            }
                        }
                        @media only screen and (max-width:767px){
                            .checkbox{ margin: 0 0 20px; }
                        }