1.checkbox-apple {
2  position: relative;
3  width: 50px;
4  height: 25px;
5  margin: 20px;
6  -webkit-user-select: none;
7  -moz-user-select: none;
8  -ms-user-select: none;
9  user-select: none;
10}
11
12.checkbox-apple label {
13  position: absolute;
14  top: 0;
15  left: 0;
16  width: 50px;
17  height: 25px;
18  border-radius: 50px;
19  background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);
20  cursor: pointer;
21  transition: all 0.3s ease;
22}
23
24.checkbox-apple label:after {
25  content: '';
26  position: absolute;
27  top: 1px;
28  left: 1px;
29  width: 23px;
30  height: 23px;
31  border-radius: 50%;
32  background-color: #fff;
33  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
34  transition: all 0.3s ease;
35}
36
37.checkbox-apple input[type="checkbox"]:checked + label {
38  background: linear-gradient(to bottom, #4cd964, #5de24e);
39}
40
41.checkbox-apple input[type="checkbox"]:checked + label:after {
42  transform: translateX(25px);
43}
44
45.checkbox-apple label:hover {
46  background: linear-gradient(to bottom, #b3b3b3, #e6e6e6);
47}
48
49.checkbox-apple label:hover:after {
50  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
51}
52
53.yep {
54  position: absolute;
55  top: 0;
56  left: 0;
57  width: 50px;
58  height: 25px;
59}