1input[type = "checkbox"] {
2  -webkit-appearance: none;
3  display: none;
4  visibility: hidden;
5}
6
7.bar {
8  display: block;
9  position: relative;
10  cursor: pointer;
11  width: 50px;
12  height: 40px;
13}
14
15.bar span {
16  position: absolute;
17  width: 45px;
18  height: 7px;
19  background: #f1faee;
20  border-radius: 100px;
21  display: inline-block;
22  transition: 0.3s ease;
23  left: 0;
24}
25
26.bar span.top {
27  top: 0;
28}
29
30.bar span.middle {
31  top: 17px;
32}
33
34.bar span.bottom {
35  bottom: 0;
36}
37
38input[type]:checked ~ span.top {
39  transform: rotate(45deg);
40  transform-origin: top left;
41  width: 48px;
42  left: 5px;
43}
44
45input[type]:checked ~ span.bottom {
46  transform: rotate(-45deg);
47  transform-origin: top left;
48  width: 48px;
49  bottom: -1px;
50  box-shadow: 0 0 10px #495057;
51}
52
53input[type]:checked ~ span.middle {
54  transform: translateX(-20px);
55  opacity: 0;
56}