Checkbox by ilusion-dev

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, -6px -6px 10px #3c3c3c;
27}
28
29.checkmark svg {
30  width: 45px;
31  height: 45px;
32  margin-top: 11px;
33  margin-left: 12.5px;
34  fill: #264d39;
35  transition: 0.2s;
36}
37
38.checkmark:active {
39  box-shadow: 2px 2px 3px #000000, -2px -2px 3px #3c3c3c;
40}
41
42/* When the checkbox is checked */
43.container input:checked ~ .checkmark {
44  box-shadow: 4px 4px 6px #000000, -4px -4px 6px #3c3c3c;
45}
46
47.container input:checked ~ .checkmark svg {
48  fill: #00ff7b;
49}
50
51.container input:checked ~ .checkmark:active {
52  box-shadow: 2px 2px 3px #000000, -2px -2px 3px #3c3c3c;
53}
54