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

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