Checkbox by Nawsome

1.clear {
2  clear: both;
3}
4
5.checkBox {
6  display: block;
7  cursor: pointer;
8  width: 30px;
9  height: 30px;
10  border: 3px solid rgba(255, 255, 255, 0);
11  border-radius: 10px;
12  position: relative;
13  overflow: hidden;
14  box-shadow: 0px 0px 0px 2px #fff;
15}
16
17.checkBox div {
18  width: 60px;
19  height: 60px;
20  background-color: #fff;
21  top: -52px;
22  left: -52px;
23  position: absolute;
24  transform: rotateZ(45deg);
25  z-index: 100;
26}
27
28.checkBox input[type=checkbox]:checked + div {
29  left: -10px;
30  top: -10px;
31}
32
33.checkBox input[type=checkbox] {
34  position: absolute;
35  left: 50px;
36  visibility: hidden;
37}
38
39.transition {
40  transition: 300ms ease;
41}