1.checkbox-wrapper-25 input[type="checkbox"] {
2  background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)),
3                      -webkit-linear-gradient(left, #f66 50%, #6cf 50%);
4  background-size: 100% 100%, 200% 100%;
5  background-position: 0 0, 15px 0;
6  border-radius: 25px;
7  box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5),
8                inset 0 0 10px hsla(0,0%,0%,.5),
9                0 0 0 1px hsla(0,0%,0%,.1),
10                0 -1px 2px 2px hsla(0,0%,0%,.25),
11                0 2px 2px 2px hsla(0,0%,100%,.75);
12  cursor: pointer;
13  height: 25px;
14  padding-right: 25px;
15  width: 75px;
16  -webkit-appearance: none;
17  -webkit-transition: .25s;
18}
19
20.checkbox-wrapper-25 input[type="checkbox"]:after {
21  background-color: #eee;
22  background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
23  border-radius: 25px;
24  box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1),
25                inset 0 -1px 1px 1px hsla(0,0%,0%,.25),
26                0 1px 3px 1px hsla(0,0%,0%,.5),
27                0 0 2px hsla(0,0%,0%,.25);
28  content: '';
29  display: block;
30  height: 25px;
31  width: 50px;
32}
33
34.checkbox-wrapper-25 input[type="checkbox"]:checked {
35  background-position: 0 0, 35px 0;
36  padding-left: 25px;
37  padding-right: 0;
38}