Clean Nav Bar

by Josh Pullen

HTML

<div id="nav">
        <a href="#" class="white">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:100,400);

#nav a {
    display:inline-block;
    color:white;
    border-right:1px solid white;
    padding-left:30px;
    padding-right:30px;
    padding-top:10px;
    padding-bottom:10px;
    font-weight:100;
    width:78px;
    text-align:center;
    margin-left:-5px;
    text-decoration:none;
}
#nav a:hover, #nav a.white {
    background:white;
    color:#F0B66C;
    cursor:pointer;
    font-weight:400;
}
#nav a:last-child {
    border-right:none;
}
#nav {
    border:1px solid white;
    border-radius:3px;
    width:410px;
    text-align:center;
    padding-left:4px;
}
body {
    background: linear-gradient(#F0B66C, #D59557);
    font-family: 'Roboto';
}
html {
    height:100%;
}