Switch by Yaya12085

1.container {
2}
3
4.label {
5  height: 60px;
6  width: 120px;
7  background-color: #ffffff;
8  border-radius: 30px;
9  -webkit-box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),
10    inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),
11    inset 0 0 0 3px rgba(0, 0, 0, 0.3);
12  box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1),
13    inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096),
14    inset 0 0 0 3px rgba(0, 0, 0, 0.3);
15  display: -webkit-box;
16  display: -ms-flexbox;
17  display: flex;
18  -webkit-box-align: center;
19  -ms-flex-align: center;
20  align-items: center;
21  cursor: pointer;
22  position: relative;
23  -webkit-transition: -webkit-transform 0.4s;
24  transition: -webkit-transform 0.4s;
25  transition: transform 0.4s;
26}
27
28.label:hover {
29  -webkit-transform: perspective(100px) rotateX(5deg) rotateY(-5deg);
30  transform: perspective(100px) rotateX(5deg) rotateY(-5deg);
31}
32
33#checkbox:checked ~ .label:hover {
34  -webkit-transform: perspective(100px) rotateX(-5deg) rotateY(5deg);
35  transform: perspective(100px) rotateX(-5deg) rotateY(5deg);
36}
37
38#checkbox {
39  display: none;
40}
41
42#checkbox:checked ~ .label::before {
43  left: 70px;
44  background-color: #000000;
45  background-image: linear-gradient(315deg, #000000 0%, #414141 70%);
46  -webkit-transition: 0.4s;
47  transition: 0.4s;
48}
49
50.label::before {
51  position: absolute;
52  content: "";
53  height: 40px;
54  width: 40px;
55  border-radius: 50%;
56  background-color: #000000;
57  background-image: linear-gradient(
58    130deg,
59    #757272 10%,
60    #ffffff 11%,
61    #726f6f 62%
62  );
63  left: 10px;
64  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3);
65  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3);
66  -webkit-transition: 0.4s;
67  transition: 0.4s;
68}
69