Q:

How to make 3 line button in the upper left corner of pinterest.com? 

I'm talking about the 3 lines and not the button itself.  How do you make those 3 lines with pure CSS, not using images, in the upper left corner of pinterest.com?  How can I make the 3 lines that fit in that small button space in an elegant way? 

A:

Now with box-shadows and html5 support! 
Here's the fiddle: http://jsfiddle.net/v2w3C/1/
<a class="menu"><span class="line"></span></a>

And the CSS! 
.menu {
    border-radius: 3px;
    border: 1px solid #ccc;
    color: #5f5f5f;
    font-weight: bold;
    display: inline-block;
    background-image: linear-gradient(rgb(255, 255, 255), rgb(240, 240, 240));
    width: 36px; 
    height: 30px;
    padding: 2px 0 0 0;
    box-sizing: border-box;
}

.menu:hover {
    background-image: linear-gradient(#e63d44,#c11a22);
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.22);
}

.menu .line {
    background: rgb(184,184,184);
    border-radius: 2px;
    box-shadow: 0 5px 0 0 rgb(184, 184, 184), 0 -5px 0 0 rgb(184, 184, 184);    
    display: block;
    margin: 10px auto 0 auto;
    height: 3px;
    width: 16px;
    content: " ";
    overflow: visible;
}

.menu:hover .line {
    background: rgb(255,255,255);
    box-shadow: 0 5px 0 0 rgb(255,255,255), 0 -5px 0 0 rgb(255,255,255);    
}

