Creating a mobile menu button is really simple using CSS3. You may find others still using an image to create those 3 horizontal lines. With the introduction of :after and :before css3 attributes, this menu can be easily done by specifying the position content of the object and adding a content attribute. The next thing you have to do is displaying the borders top and bottom to achieve this.

Before we start writing the css code, it would be a good idea to understand what the :after, :before, and content attribute means. The :after attribute means you want to add something after the end of the specified element. While the :before attribute means you want to add something before the start of the element. The content attribute itself represents you want to add some content to specified object.

<style type="text/css">
#mobile-button{
	cursor:pointer;
	display:inline-block;
}

#mobile-button::after {
	display: block;
	content: '';
	height: 4px;
	width: 25px;
	border-top: 3px solid #fc0101;
	border-bottom: 3px solid #fc0101;
}

#mobile-button::before {
	display: block;
	content: '';
	height: 4px;
	width: 25px;
	border-top: 3px solid #fc0101;
}
</style>

<div id='mobile-button'></div>

Quick Demo of Mobile menu

Here is the quick demo of the 3 lines horizontal menu.