1.check {
2  cursor: pointer;
3  position: relative;
4  margin: auto;
5  width: 18px;
6  height: 18px;
7  -webkit-tap-highlight-color: transparent;
8  transform: translate3d(0, 0, 0);
9}
10
11.check:before {
12  content: "";
13  position: absolute;
14  top: -15px;
15  left: -15px;
16  width: 48px;
17  height: 48px;
18  border-radius: 50%;
19  background: rgba(34,50,84,0.03);
20  opacity: 0;
21  transition: opacity 0.2s ease;
22}
23
24.check svg {
25  position: relative;
26  z-index: 1;
27  fill: none;
28  stroke-linecap: round;
29  stroke-linejoin: round;
30  stroke: #c8ccd4;
31  stroke-width: 1.5;
32  transform: translate3d(0, 0, 0);
33  transition: all 0.2s ease;
34}
35
36.check svg path {
37  stroke-dasharray: 60;
38  stroke-dashoffset: 0;
39}
40
41.check svg polyline {
42  stroke-dasharray: 22;
43  stroke-dashoffset: 66;
44}
45
46.check:hover:before {
47  opacity: 1;
48}
49
50.check:hover svg {
51  stroke: #4285f4;
52}
53
54#cbx:checked + .check svg {
55  stroke: #4285f4;
56}
57
58#cbx:checked + .check svg path {
59  stroke-dashoffset: 60;
60  transition: all 0.3s linear;
61}
62
63#cbx:checked + .check svg polyline {
64  stroke-dashoffset: 42;
65  transition: all 0.2s linear;
66  transition-delay: 0.15s;
67}
68