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: green;
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}
39
40.speaker svg {
41  width: 18px;
42}
43
44.mute-speaker {
45  position: absolute;
46  width: 100%;
47  height: 100%;
48  display: flex;
49  align-items: center;
50  justify-content: center;
51  opacity: 0;
52  z-index: 3;
53  transition-duration: 0.3s;
54}
55
56.mute-speaker svg {
57  width: 18px;
58}
59
60#checkboxInput:checked + .toggleSwitch .speaker {
61  opacity: 0;
62  transition-duration: 0.3s;
63}
64
65#checkboxInput:checked + .toggleSwitch .mute-speaker {
66  opacity: 1;
67  transition-duration: 0.3s;
68  background-color: red;
69}
70
71#checkboxInput:active + .toggleSwitch {
72  transform: scale(0.7);
73}
74
75#checkboxInput:hover + .toggleSwitch {
76  background-color: rgb(61, 61, 61);
77}
78