demo.css

.ui-checkbox{position:relative;z-index:1}.ui-checkbox label{position:relative;display:inline-block}.ui-checkbox input[type=checkbox]{visibility:hidden;position:absolute}.ui-checkbox input[type=checkbox]:checked+.ui-checkbox-marker{border-color:#0075a2;background:#0075a2}.ui-checkbox input[type=checkbox]:checked+.ui-checkbox-marker:before{border-color:#fff;opacity:1;animation:marker-checked 0.2s ease-out}.ui-checkbox input[type=checkbox]:checked+.ui-checkbox-marker:after{border-radius:0px;top:0;left:0;width:20px;height:20px}.ui-checkbox span{display:inline-block;vertical-align:middle;cursor:pointer}.ui-checkbox:hover .ui-checkbox-marker{background:#cfcfbe}.ui-checkbox:hover .ui-checkbox-marker:before{opacity:20}.ui-checkbox .ui-checkbox-marker{top:0;left:0;position:relative;background:#fff;width:20px;height:20px;border:1px solid #cfcfbe;transition:all 0.15s ease-in-out}.ui-checkbox .ui-checkbox-marker:after,.ui-checkbox .ui-checkbox-marker:before{content:'';position:absolute;display:block}.ui-checkbox .ui-checkbox-marker:before{background:transparent;top:50%;left:50%;margin-top:-6px;margin-left:-6px;height:5px;width:10px;border:2px solid #fff;border-top:none;border-right:none;z-index:1;opacity:0;transition:border 0.1s ease-in-out 0.3s;transform:rotate(-45deg)}.ui-checkbox .ui-checkbox-marker:after{width:20px;height:20px;background:#fff;top:0;left:0;z-index:-1;transition:background 0.1s ease-in-out}.ui-checkbox .ui-checkbox-label{margin-left:5px}.ui-checkbox.error .ui-checkbox-marker{border-color:#c00}.ui-checkbox.success .ui-checkbox-marker{border-color:green}@keyframes marker-checked{0%{transform:rotate(-45deg) scale(1)}50%{transform:rotate(-45deg) scale(1.5)}100%{transform:rotate(-45deg) scale(1)}}.ui-checkbox{margin:10px 0}