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