1/* 
2Button insperation by @ke1221
3Menu icon transofmation insperation by @Ali-Tahmazi99
4*/
5.menuButton {
6  display: flex;
7  justify-content: center;
8  align-items: center;
9  flex-direction: column;
10  gap: 13%;
11  color: #090909;
12  width: 3.5em;
13  height: 3.5em;
14  border-radius: 0.5em;
15  background: #e8e8e8;
16  border: 1px solid #e8e8e8;
17  transition: all .3s;
18  box-shadow: 6px 6px 12px #c5c5c5,
19             -6px -6px 12px #ffffff;
20}
21
22.menuButton:hover {
23  border: 1px solid white;
24}
25
26.menuButton:active {
27  color: #666;
28  box-shadow: inset 4px 4px 12px #c5c5c5,
29             inset -4px -4px 12px #ffffff;
30}
31
32input[type = "checkbox"] {
33  -webkit-appearance: none;
34  display: none;
35  visibility: hidden;
36}
37
38.menuButton span {
39  width: 30px;
40  height: 4px;
41  background: #131313;
42  border-radius: 100px;
43  transition: 0.3s ease;
44}
45
46input[type]:checked ~ span.top {
47  transform: translateY(290%)rotate(45deg);
48  width: 40px;
49}
50
51input[type]:checked ~ span.bot {
52  transform: translateY(-270%) rotate(-45deg);
53  width: 40px;
54  box-shadow: 0 0 10px #495057;
55}
56
57input[type]:checked ~ span.mid {
58  transform: translateX(-20px);
59  opacity: 0;
60}