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.container {
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  width: 80px;
15  height: 80px;
16  border-radius: 80px;
17  box-shadow: 0px 5px 20px #11111166;
18  background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
19}
20
21/* Hide default HTML checkbox */
22.switch input {
23  opacity: 0;
24  width: 0;
25  height: 0;
26}
27
28/* The slider */
29.slider {
30  position: absolute;
31  cursor: pointer;
32  top: 0;
33  left: 0;
34  right: 0;
35  bottom: 0;
36  background-color: #ccc;
37  transition: .4s;
38  border-radius: 30px;
39  transform: rotate(-90deg);
40}
41
42.slider:before {
43  position: absolute;
44  content: "";
45  height: 1.4em;
46  width: 1.4em;
47  border-radius: 20px;
48  left: 0.3em;
49  bottom: 0.3em;
50  background-color: white;
51  transition: .4s cubic-bezier(0.19, 1, 0.22, 1);
52  transition-delay: .2s;
53}
54
55.switch input:checked + .slider {
56  background-color: #2196F3;
57  transform: rotate(90deg);
58}
59
60.switch input:focus + .slider {
61  box-shadow: 0 0 1px #2196F3;
62}
63
64.switch input:checked + .slider:before {
65  transition-delay: .2s;
66  transform: translateX(1.5em);
67}