Switch by misaraadel

1.switch {
2  position: relative;
3  cursor: pointer;
4}
5
6.switch input {
7  -webkit-appearance: none;
8  -moz-appearance: none;
9  appearance: none;
10  opacity: 0;
11  position: relative;
12  width: 100%;
13  height: 100%;
14  position: absolute;
15  top: 0;
16  left: 0;
17  z-index: 99;
18  cursor: pointer;
19}
20
21.switch input:checked ~ .check {
22  background-color: #549b60;
23}
24
25.switch input:checked ~ .check::after {
26  transform: translateX(0px);
27}
28
29.switch input:checked ~ .check::before {
30  transform: translateX(50px) !important;
31}
32
33.switch .check {
34  width: 51px;
35  height: 30px;
36  position: relative;
37  display: block;
38  background-color: #E92E2E;
39  cursor: pointer;
40  border-radius: 15px;
41  overflow: hidden;
42  transition: all 0.5s ease-in;
43}
44
45.switch .check::after,
46.switch .check::before {
47  content: "";
48  position: absolute;
49  top: 0;
50  width: 30px;
51  height: 30px;
52  transition: all 0.5s ease-in;
53  border-radius: 50%;
54}
55
56.switch .check::before {
57  background-color: #fff;
58  right: 0px;
59}
60
61.switch .check::after {
62  transform: translateX(-60px);
63  background-color: #fff;
64  left: 0;
65}