Switch by Admin12121

1.switch-button {
2  display: -webkit-box;
3  display: -ms-flexbox;
4  display: flex;
5  -webkit-box-align: center;
6  align-items: center;
7  -webkit-box-pack: center;
8  justify-content: center;
9  justify-content: center;
10  margin: auto;
11  height: 55px;
12}
13
14.switch-button .switch-outer {
15  height: 100%;
16  background: #252532;
17  width: 115px;
18  border-radius: 165px;
19  -webkit-box-shadow: inset 0px 5px 10px 0px #16151c, 0px 3px 6px -2px #403f4e;
20  box-shadow: inset 0px 5px 10px 0px #16151c, 0px 3px 6px -2px #403f4e;
21  border: 1px solid #32303e;
22  padding: 6px;
23  -webkit-box-sizing: border-box;
24  box-sizing: border-box;
25  cursor: pointer;
26  -webkit-tap-highlight-color: transparent;
27}
28
29.switch-button .switch-outer input[type="checkbox"] {
30  opacity: 0;
31  -webkit-appearance: none;
32  -moz-appearance: none;
33  appearance: none;
34  position: absolute;
35}
36
37.switch-button .switch-outer .button-toggle {
38  height: 42px;
39  width: 42px;
40  background: -webkit-gradient(
41    linear,
42    left top,
43    left bottom,
44    from(#3b3a4e),
45    to(#272733)
46  );
47  background: -o-linear-gradient(#3b3a4e, #272733);
48  background: linear-gradient(#3b3a4e, #272733);
49  border-radius: 100%;
50  -webkit-box-shadow: inset 0px 5px 4px 0px #424151, 0px 4px 15px 0px #0f0e17;
51  box-shadow: inset 0px 5px 4px 0px #424151, 0px 4px 15px 0px #0f0e17;
52  position: relative;
53  z-index: 2;
54  -webkit-transition: left 0.3s ease-in;
55  -o-transition: left 0.3s ease-in;
56  transition: left 0.3s ease-in;
57  left: 0;
58}
59
60.switch-button
61  .switch-outer
62  input[type="checkbox"]:checked
63  + .button
64  .button-toggle {
65  left: 58%;
66}
67
68.switch-button
69  .switch-outer
70  input[type="checkbox"]:checked
71  + .button
72  .button-indicator {
73  -webkit-animation: indicator 1s forwards;
74  animation: indicator 1s forwards;
75}
76
77.switch-button .switch-outer .button {
78  width: 100%;
79  height: 100%;
80  display: -webkit-box;
81  display: -ms-flexbox;
82  display: flex;
83  position: relative;
84  -webkit-box-pack: justify;
85  justify-content: space-between;
86}
87
88.switch-button .switch-outer .button-indicator {
89  height: 25px;
90  width: 25px;
91  top: 50%;
92  -webkit-transform: translateY(-50%);
93  transform: translateY(-50%);
94  border-radius: 50%;
95  border: 3px solid #ef565f;
96  -webkit-box-sizing: border-box;
97  box-sizing: border-box;
98  right: 10px;
99  position: relative;
100}
101
102@-webkit-keyframes indicator {
103  30% {
104    opacity: 0;
105  }
106
107  0% {
108    opacity: 1;
109  }
110
111  100% {
112    opacity: 1;
113    border: 3px solid #60d480;
114    left: -68%;
115  }
116}
117
118@keyframes indicator {
119  30% {
120    opacity: 0;
121  }
122
123  0% {
124    opacity: 1;
125  }
126
127  100% {
128    opacity: 1;
129    border: 3px solid #60d480;
130    left: -68%;
131  }
132}