Switch by Na3ar-17

1.container {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  margin: 0;
6  padding: 0;
7  box-sizing: border-box;
8  font-family: Arial, Helvetica, sans-serif;
9  color: #fff;
10}
11
12.switch {
13  font-size: 0.875rem;
14  position: relative;
15  display: inline-block;
16  width: 9em;
17  height: 2.6em;
18}
19
20.switch input {
21  display: none;
22  opacity: 0;
23  width: 0;
24  height: 0;
25}
26
27.switch input:checked + .slider .ball {
28  box-shadow: 10px 10px 100px #7f8996;
29}
30
31.switch input:checked + .slider .title {
32  left: 40%;
33}
34
35.switch input:checked + .slider {
36  background-color: #8a5cd4;
37}
38
39.switch input:focus + .slider {
40  box-shadow: 10px 10px 100px #7f8996;
41}
42
43.switch input:checked + .slider .ball {
44  left: 72%;
45  transform: rotate(360deg);
46  box-shadow: none;
47  outline: 6px solid rgba(255, 255, 255, 0.278);
48}
49
50.switch .slider {
51  position: absolute;
52  cursor: pointer;
53  top: 0;
54  left: 0;
55  right: 0;
56  bottom: 0;
57  background-color: #313033;
58  transition: all 0.4s;
59  border-radius: 30px;
60}
61
62.switch .slider .title {
63  position: absolute;
64  top: 50%;
65  left: 50%;
66  transform: translate(-50%, -50%);
67  font-weight: 600;
68  transition: all 0.4s;
69  -webkit-user-select: none;
70  -ms-user-select: none;
71  user-select: none;
72}
73
74.switch .slider .ball {
75  background-color: #fff;
76  height: 36px;
77  width: 36px;
78  border-radius: 50%;
79  position: absolute;
80  left: -1px;
81  transition: 0.4s;
82}
83
84.switch .slider .ball .icon {
85  position: absolute;
86  top: 58%;
87  left: 53%;
88  transform: translate(-50%, -50%);
89  color: #313033;
90  font-size: 12px;
91}
92