Pure CSS Hamburger Menu Icon
This is a hamburger menu icon. Pure CSS, no image.
The hamburger icon is widely recognizable and consistently used across platforms. There is an HTML entity unicode for the hamburger icon (here ☰ --> ☰), but it doesn't show up in older android mobile browsers. It seems a little blurry to when scaled up, and you can't change the spacing. It is small by default so it needs to be scaled up using font-size, but if you are using CSS anyway, just make a clean looking icon.
The HTML entity scaled up: ☰
Method 1 - use double border
CSS:
#burgericon1 {
display:inline-block;
border-bottom: 10.5px double black;
border-top: 3.5px solid black;
height: 4px;
width: 25px;
text-decoration: none;
}
HTML:
<a id="burgericon1" href="javascript:alert('clicked')"></a>
Example 1:
Method 2 - use an inner div for the center line.
#burgericon2 {
display:inline-block;
width:25px;
background:transparent;
border-top:4px #000 solid;
border-bottom:4px #000 solid;
}
#burgericon2 div {
background:#000;
height:4px;
margin:4px 0;
width:100%;
}
HTML:
<a id="burgericon2" href="javascript:alert('clicked')"><div></div></a>