1 
2<label class="burger" for="burger">
3  <input type="checkbox" id="burger">
4  <span></span>
5  <span></span>
6  <span></span>
7</label>          

 1 
 2.burger {
 3  position: relative;
 4  width: 40px;
 5  height: 30px;
 6  background: transparent;
 7  cursor: pointer;
 8  display: block;
 9}
10 
11.burger input {
12  display: none;
13}
14 
15.burger span {
16  display: block;
17  position: absolute;
18  height: 4px;
19  width: 100%;
20  background: black;
21  border-radius: 9px;
22  opacity: 1;
23  left: 0;
24  transform: rotate(0deg);
25  transition: .25s ease-in-out;
26}
27 
28.burger span:nth-of-type(1) {
29  top: 0px;
30  transform-origin: left center;
31}
32 
33.burger span:nth-of-type(2) {
34  top: 50%;
35  transform: translateY(-50%);
36  transform-origin: left center;
37}
38 
39.burger span:nth-of-type(3) {
40  top: 100%;
41  transform-origin: left center;
42  transform: translateY(-100%);
43}
44 
45.burger input:checked ~ span:nth-of-type(1) {
46  transform: rotate(45deg);
47  top: 0px;
48  left: 5px;
49}
50 
51.burger input:checked ~ span:nth-of-type(2) {
52  width: 0%;
53  opacity: 0;
54}
55 
56.burger input:checked ~ span:nth-of-type(3) {
57  transform: rotate(-45deg);
58  top: 28px;
59  left: 5px;
60}