1#_checkbox {
2 display: none;
3}
4
5label {
6 position: absolute;
7 top: 50%;
8 right: 0;
9 left: 0;
10 width: 30px;
11 height: 30px;
12 margin: 0 auto;
13 background-color: #f72414;
14 transform: translateY(-50%);
15 border-radius: 50%;
16 cursor: pointer;
17 transition: 0.2s ease transform, 0.2s ease background-color, 0.2s ease box-shadow;
18 overflow: hidden;
19 z-index: 1;
20}
21
22label:before {
23 content: "";
24 position: absolute;
25 top: 50%;
26 right: 0;
27 left: 0;
28 width: 24px;
29 height: 23px;
30 margin: 0 auto;
31 background-color: #fff;
32 transform: translateY(-50%);
33 border-radius: 50%;
34 box-shadow: inset 0 7px 10px #ffbeb8;
35 transition: 0.2s ease width, 0.2s ease height;
36}
37
38label:hover:before {
39 transform: translateY(-50%) scale(1.1);
40 box-shadow: inset 0 7px 10px #ff9d96;
41}
42
43label:active {
44 transform: translateY(-50%) scale(0.9);
45}
46
47#tick_mark {
48 position: absolute;
49 top: 0px;
50 right: 0;
51 left: 0;
52 width: 15px;
53 height: 18px;
54 margin: 0 auto;
55 margin-left: 5px;
56 transform: rotateZ(-40deg);
57}
58
59#tick_mark:before, #tick_mark:after {
60 content: "";
61 position: absolute;
62 background-color: #fff;
63 border-radius: 2px;
64 opacity: 0;
65 transition: 0.2s ease transform, 0.2s ease opacity;
66}
67
68#tick_mark:before {
69 left: 0;
70 bottom: 0;
71 width: 4px;
72 height: 10px;
73 box-shadow: -2px 0 5px rgba(0,0,0,0.23);
74 transform: translateY(-68px)
75}
76
77#tick_mark:after {
78 left: 0;
79 bottom: 0;
80 width: 100%;
81 height: 4px;
82 box-shadow: 0 3px 5px rgba(0,0,0,0.23);
83 transform: translateX(78px)
84}
85
86#_checkbox:checked + label {
87 background-color: #07d410;
88}
89
90#_checkbox:checked + label:before {
91 width: 0;
92 height: 0;
93}
94
95#_checkbox:checked + label #tick_mark:before, #_checkbox:checked + label #tick_mark:after {
96 transform: translate(0);
97 opacity: 1;
98}