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  background-color: #B0B0B0;
26  border: 1px solid #B0B0B0;
27  transition: .4s;
28  border-radius: 32px;
29  outline: none;
30}
31
32.slider:before {
33  position: absolute;
34  content: "";
35  height: 2rem;
36  width: 2rem;
37  border-radius: 50%;
38  outline: 2px solid #B0B0B0;
39  left: -1px;
40  bottom: -1px;
41  background-color: #fff;
42  transition: transform .25s ease-in-out 0s;
43}
44
45.slider-icon {
46  opacity: 0;
47  height: 12px;
48  width: 12px;
49  stroke-width: 8;
50  position: absolute;
51  z-index: 999;
52  stroke: #222222;
53  right: 60%;
54  top: 30%;
55  transition: right ease-in-out .3s, opacity ease-in-out .15s;
56}
57
58input:checked + .slider {
59  background-color: #222222;
60}
61
62input:checked + .slider .slider-icon {
63  opacity: 1;
64  right: 20%;
65}
66
67input:checked + .slider:before {
68  transform: translateX(1.5em);
69  outline-color: #181818;
70}