Switch by Tsiangana

1/* The switch - the box around the slider */
2.switch {
3  font-size: 17px;
4  position: relative;
5  display: inline-block;
6  width: 3.5em;
7  height: 2em;
8}
9
10/* Hide default HTML checkbox */
11.switch input {
12  opacity: 0;
13  width: 0;
14  height: 0;
15}
16
17/* The slider */
18.slider {
19  position: absolute;
20  cursor: pointer;
21  top: 0;
22  left: 0;
23  right: 0;
24  bottom: 0;
25  padding-top: 5px;
26  background-color: rgb(199, 219, 215);
27  transition: 0.4s;
28  border-radius: 30px;
29  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
30  border: 1px solid #fff;
31}
32
33.slider .fug .nav {
34  position: absolute;
35  height: 1.4em;
36  width: 1.5em;
37  left: 0.3em;
38  bottom: 0.3em;
39  transition: 0.4s;
40  z-index: 10;
41  transform: rotate(45deg);
42  fill: #fff;
43}
44
45.switch input:checked + .slider {
46  background-color: #2b4360;
47}
48
49.switch input:focus + .slider {
50  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
51}
52
53.switch input:checked + .slider .fug .nav {
54  transition: 0.4s;
55  transform: translateX(1.3em) rotate(45deg);
56  padding: 3px;
57  animation: 4s nav linear infinite;
58}
59
60@keyframes nav {
61  0% {
62    transform: translateX(1.3em) rotate(45deg);
63  }
64  10% {
65    transform: translateX(1.1em) rotate(45deg);
66  }
67  30% {
68    transform: translateX(1.2em) rotate(45deg);
69  }
70  50% {
71    transform: translateX(1em) rotate(45deg);
72  }
73  70% {
74    transform: translateX(1.2em) rotate(45deg);
75  }
76  80% {
77    transform: translateX(1em) rotate(45deg);
78  }
79  90% {
80    transform: translateX(1.2em) rotate(45deg);
81  }
82  100% {
83    transform: translateX(1.3em) rotate(45deg);
84  }
85}
86
87.star {
88  opacity: 0;
89  transition: 0.2s linear;
90}
91
92.switch input:checked + .slider .star {
93  opacity: 1;
94  transition: 0.2s linear;
95  animation: 2s piscar linear infinite;
96}
97
98.star:nth-last-child(1) {
99  position: absolute;
100  top: 7px;
101  left: 13px;
102}
103.star:nth-last-child(2) {
104  position: absolute;
105  top: 14px;
106  left: 19px;
107}
108.star:nth-last-child(3) {
109  position: absolute;
110  top: 18px;
111  left: 9px;
112}
113.star:nth-last-child(4) {
114  position: absolute;
115  top: 23px;
116  left: 24px;
117}
118
119@keyframes piscar {
120  0% {
121    opacity: 1;
122  }
123  50% {
124    opacity: 0;
125  }
126  100% {
127    opacity: 1;
128  }
129}
130