<!--HTML-->
<button type="button" class="btn hamburger">
<span>Menu</span>
<span class="hamburger-bar">
<span></span>
<span></span>
<span></span>
</span>
</button>
<!--CSS (SCSS)-->
.hamburger {
float: right;
width: 100px;
padding: 0px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
background-color: transparent;
border: 0;
font-size: 14px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
.hamburger-bar {
margin-left: 20px;
width: 30px;
height: 20px;
position: relative;
span {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background: #fff;
&:first-child {
top: 0;
}
&:nth-child(2) {
top: 50%;
}
&:last-child {
bottom: 0;
}
}
}
}