Checkbox by aadium

1/* Hide the default checkbox */
2.container input {
3  position: absolute;
4  opacity: 0;
5  cursor: pointer;
6  height: 0;
7  width: 0;
8}
9
10.container {
11  display: block;
12  position: relative;
13  cursor: pointer;
14  font-size: 20px;
15  user-select: none;
16}
17
18/* Create a custom checkbox */
19.checkmark {
20  position: relative;
21  height: 70px;
22  width: 70px;
23  border-radius: 10em;
24  background-color: #212121;
25  transition: 0.3s;
26  box-shadow: 6px 6px 10px #000000,
27  -6px -6px 10px #3c3c3c;
28}
29
30.checkmark svg {
31  width: 45px;
32  height: 45px;
33  margin-top: 11px;
34  margin-left: 12.5px;
35  fill: #264d39;
36  transition: 0.2s;
37}
38
39.checkmark:active {
40  box-shadow: 2px 2px 3px #000000,
41  -2px -2px 3px #3c3c3c;
42}
43
44/* When the checkbox is checked */
45.container input:checked ~ .checkmark {
46  box-shadow: 4px 4px 6px #000000,
47  -4px -4px 6px #3c3c3c;
48}
49
50.container input:checked ~ .checkmark svg {
51  fill: #00ff7b;
52}
53
54.container input:checked ~ .checkmark:active {
55  box-shadow: 2px 2px 3px #000000,
56  -2px -2px 3px #3c3c3c;
57}