1.switch-holder {
2  display: flex;
3  padding: 10px 20px;
4  border-radius: 10px;
5  box-shadow: -8px -8px 15px rgba(255, 255, 255, .7),
6        10px 10px 10px rgba(0, 0, 0, .2),
7        inset 8px 8px 15px rgba(255, 255, 255, .7),
8        inset 10px 10px 10px rgba(0, 0, 0, .2);
9  justify-content: space-between;
10  align-items: center;
11}
12
13.switch-label {
14  padding: 0 20px 0 10px
15}
16
17.switch-label i {
18  margin-right: 5px;
19}
20
21.switch-toggle {
22  height: 40px;
23}
24
25.switch-toggle input[type="checkbox"] {
26  position: absolute;
27  opacity: 0;
28  z-index: -2;
29}
30
31.switch-toggle input[type="checkbox"]+label {
32  position: relative;
33  display: inline-block;
34  width: 100px;
35  height: 40px;
36  border-radius: 20px;
37  margin: 0;
38  cursor: pointer;
39  box-shadow: inset -8px -8px 15px rgba(255, 255, 255, .6),
40        inset 10px 10px 10px rgba(0, 0, 0, .25);
41}
42
43.switch-toggle input[type="checkbox"]+label::before {
44  position: absolute;
45  content: 'OFF';
46  font-size: 13px;
47  text-align: center;
48  line-height: 25px;
49  top: 8px;
50  left: 8px;
51  width: 45px;
52  height: 25px;
53  border-radius: 20px;
54  background-color: #eeeeee;
55  box-shadow: -3px -3px 5px rgba(255, 255, 255, .5),
56        3px 3px 5px rgba(0, 0, 0, .25);
57  transition: .3s ease-in-out;
58}
59
60.switch-toggle input[type="checkbox"]:checked+label::before {
61  left: 50%;
62  content: 'ON';
63  color: #fff;
64  background-color: #00b33c;
65  box-shadow: -3px -3px 5px rgba(255, 255, 255, .5),
66        3px 3px 5px #00b33c;
67}