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  border-radius: 30px;
26  box-shadow: 0 0 0 2px #f32f2150;
27  border: 4px solid transparent;
28  overflow: hidden;
29  transition: .4s;
30  background: transparent;
31}
32
33.slider:before {
34  position: absolute;
35  content: "";
36  width: 100%;
37  height: 100%;
38  border-radius: 30px;
39  background-color: #f32f21;
40  transform: translateX(-50%);
41  transition: .4s;
42}
43
44input:checked + .slider {
45  background-color: #f7b48e;
46}
47
48input:focus:checked + .slider {
49  box-shadow: 0 0 0 2px #f32f21, 0 0 4px #777;
50}
51
52input:checked + .slider:before {
53  transform: translateX(1.5em);
54}