Checkbox by UmangLadha

1.checkbox-wrapper .cbx {
2  -webkit-user-select: none;
3  user-select: none;
4  -webkit-tap-highlight-color: transparent;
5  cursor: pointer;
6}
7.checkbox-wrapper .cbx span {
8  display: inline-block;
9  vertical-align: middle;
10  transform: translate3d(0, 0, 0);
11}
12.checkbox-wrapper .cbx span:first-child {
13  position: relative;
14  width: 24px;
15  height: 24px;
16  border-radius: 50%;
17  transform: scale(1);
18  vertical-align: middle;
19  border: 1px solid #b9b8c3;
20  transition: all 0.2s ease;
21}
22.checkbox-wrapper .cbx span:first-child svg {
23  position: absolute;
24  z-index: 1;
25  top: 8px;
26  left: 6px;
27  fill: none;
28  stroke: white;
29  stroke-width: 2;
30  stroke-linecap: round;
31  stroke-linejoin: round;
32  stroke-dasharray: 16px;
33  stroke-dashoffset: 16px;
34  transition: all 0.3s ease;
35  transition-delay: 0.1s;
36  transform: translate3d(0, 0, 0);
37}
38.checkbox-wrapper .cbx span:first-child:before {
39  content: "";
40  width: 100%;
41  height: 100%;
42  background: #506eec;
43  display: block;
44  transform: scale(0);
45  opacity: 1;
46  border-radius: 50%;
47  transition-delay: 0.2s;
48}
49.checkbox-wrapper .cbx span:last-child {
50  margin-left: 8px;
51}
52.checkbox-wrapper .cbx span:last-child:after {
53  content: "";
54  position: absolute;
55  top: 8px;
56  left: 0;
57  height: 1px;
58  width: 100%;
59  background: #b9b8c3;
60  transform-origin: 0 0;
61  transform: scaleX(0);
62}
63.checkbox-wrapper .cbx:hover span:first-child {
64  border-color: #3c53c7;
65}
66
67.checkbox-wrapper .inp-cbx:checked + .cbx span:first-child {
68  border-color: #3c53c7;
69  background: #3c53c7;
70  animation: check-15 0.6s ease;
71}
72.checkbox-wrapper .inp-cbx:checked + .cbx span:first-child svg {
73  stroke-dashoffset: 0;
74}
75.checkbox-wrapper .inp-cbx:checked + .cbx span:first-child:before {
76  transform: scale(2.2);
77  opacity: 0;
78  transition: all 0.6s ease;
79}
80.checkbox-wrapper .inp-cbx:checked + .cbx span:last-child {
81  color: #b9b8c3;
82  transition: all 0.3s ease;
83}
84.checkbox-wrapper .inp-cbx:checked + .cbx span:last-child:after {
85  transform: scaleX(1);
86  transition: all 0.3s ease;
87}
88
89@keyframes check-15 {
90  50% {
91    transform: scale(1.2);
92  }
93}
94