Switch by ElsayedShamsEldeen

1/* The switch - the box around the speaker*/
2.toggleSwitch {
3  width: 50px;
4  height: 50px;
5  position: relative;
6  display: flex;
7  align-items: center;
8  justify-content: center;
9  background-color: red;
10  border-radius: 50%;
11  cursor: pointer;
12  transition-duration: 0.3s;
13  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.13);
14  overflow: hidden;
15}
16
17/* Hide default HTML checkbox */
18#checkboxInput {
19  display: none;
20}
21
22.bell {
23  width: 18px;
24}
25
26.bell path {
27  fill: white;
28}
29
30.speaker {
31  width: 100%;
32  height: 100%;
33  display: flex;
34  align-items: center;
35  justify-content: center;
36  z-index: 2;
37  transition-duration: 0.3s;
38  opacity: 0;
39}
40
41.speaker svg {
42  width: 18px;
43}
44
45.mute-speaker {
46  position: absolute;
47  width: 100%;
48  height: 100%;
49  display: flex;
50  align-items: center;
51  justify-content: center;
52  opacity: 1;
53  z-index: 3;
54  transition-duration: 0.3s;
55}
56
57.mute-speaker svg {
58  width: 18px;
59}
60
61#checkboxInput:checked + .toggleSwitch .speaker {
62  opacity: 1;
63  transition-duration: 0.3s;
64  background-color: green;
65}
66
67#checkboxInput:checked + .toggleSwitch .mute-speaker {
68  opacity: 0;
69  transition-duration: 0.3s;
70}
71
72#checkboxInput:active + .toggleSwitch {
73  transform: scale(0.7);
74}
75
76#checkboxInput:hover + .toggleSwitch {
77  background-color: rgb(61, 61, 61);
78}
79