CODEWITHSUNDEEP
css
Howard
Howard

Reputation: 3758

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?

Upvotes: 0

Views: 987

Answers (3)

Mike Robinson
Mike Robinson

Reputation: 25159

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);    
}

Upvotes: 1

RussellUresti
RussellUresti

Reputation: 6221

There are a ton of ways to do this. But I'm going to post the easiest way I know. It's a unicode character: &#9776; and it looks like this: ☰

Upvotes: 0

frydoubt
frydoubt

Reputation: 77

HTML:
<div class="line-separator"></div>

CSS:
.line-separator { height:1px; background: #999; border-bottom: 1px solid #333; }

background changes the line color, and border-bottom gives it a drop-shadow effect. Adjust the colors to your liking.

Upvotes: 0

Related Questions