Checkbox by TISEPSE

1.checkbox-label {
2  font-size: 22px;
3  color: #fefefe;
4  padding: 10px 50px 10px 5px;
5  font-family: Arial, Helvetica, sans-serif;
6  user-select: none;
7  display: flex;
8  position: relative;
9  align-items: center;
10  transition: all 0.3s;
11}
12
13.checkbox {
14  width: 35px;
15  height: 35px;
16  cursor: pointer;
17  margin-right: -22px;
18  appearance: none;
19  border-radius: 5px;
20  background-color: #64ccc5;
21  z-index: 2;
22  transition: all 0.3s;
23}
24
25.container {
26  width: 35px;
27  height: 35px;
28  position: relative;
29  top: 4px;
30  left: -8%;
31  border-radius: 5px;
32  background-color: #dafffb;
33  transition: all 0.3s;
34}
35
36.checkbox::before {
37  content: "";
38  background-color: #ffc8c8;
39  position: relative;
40  display: flex;
41  top: 45%;
42  left: 50%;
43  width: 55px;
44  height: 3px;
45  border-radius: 25px;
46  transform: translate(100px, 0px) scale(0);
47  transition: ease-out 0.15s;
48}
49
50.checkbox:checked::before {
51  transform: translateX(2em);
52  top: 12px;
53  transition: ease-out 0.15s;
54}
55
56.checkbox:hover {
57  transform: translate(4px, 4px);
58  transition: ease-out 0.15s;
59  background-color: #ffc8c8;
60}
61
62.checkbox:checked {
63  transform: translate(4px, 4px);
64  transition: ease-out 0.15s;
65  background-color: #ffc8c8;
66}
67
68.svg-icon {
69  position: absolute;
70  width: 25px;
71  height: 25px;
72  display: flex;
73  z-index: 3;
74  top: 35%;
75  left: 11%;
76  color: #fefefe;
77  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
78  transform: rotate(0deg) scale(0);
79  transition: ease-in 0.2s;
80}
81
82.checkbox:checked ~ .svg-icon {
83  transform: rotate(360deg) scale(1);
84  transition: ease-in 0.2s;
85}
86