Navigation Buttons - CSS3 Demos | Grains of Sand

The HTML is the same for all the navigation bars, apart from the id applied to the nav tag...

<nav id="button">
<ul>
<li><a href="/">Home</a></li>
<li><a class="now" href="#" title="Link description if needed">Current Page</a></li>
<li><a href="#" title="Link description if needed">More Stuff</a></li>
<li><a href="#" title="Link description if needed">Coolness</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

The BASIC CSS is the same for all the navigation bars...

nav#button1, nav#button2, nav#button3, nav#button4 {
font-family: 'PT Sans Narrow', sans-serif; /*PT Sans Narrow is available from http://www.google.com/webfonts/specimen/PT+Sans+Narrow*/
padding:10px 5px;
width:800px;
}
nav#button1 ul, nav#button2 ul, nav#button3 ul, nav#button4 ul{
list-style-type:none; /*remove the bullet point from the list items*/
text-align:center;
}
nav#button1 li, nav#button2 li, nav#button3 li, nav#button4 li{
display:inline;
padding:0 30px;
font-size:1.1em;
}
nav#button1 a, nav#button2 a, nav#button3 a, nav#button4 a {
color:#fff;
text-decoration:none; /*remove the underline from the links*/
}

/***HELP IE8 & EARLIER WITH CSS3 USING CSS3PIE***/
/*note that we're not applying CSS3Pie to button#4 because it stops the nth-child hack used below from working*/
nav#button1 a, nav#button2 a{
behavior: url(pie/PIE.php); /*use .php instead of .htc here because we're also targetting IE9*/
}
nav#button3 a{
behavior: url(pie/PIE.htc);
}

DEMO 1 Styling...

/***Style the links to look like buttons***/
nav#button1 a{
letter-spacing:0.035em;
text-shadow: 0px -1px 0px #b1b1b1;
padding:5px 12px;
/*add a gradient to the background*/
background:#136caa; /*required for browsers that don't support gradients*/
background: -webkit-linear-gradient(top, #136caa, #4f98cb);
background: -moz-linear-gradient(top, #136caa, #4f98cb);
background: -o-linear-gradient(top, #136caa, #4f98cb);
background: -ms-linear-gradient(top, #136caa, #4f98cb);
background: linear-gradient(top, #136caa, #4f98cb);
-pie-background: linear-gradient(#136caa, #4f98cb); /*IE8 and earlier see CSS3Pie website for more info*/
/*add a curve to the corners of the button*/
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
/*add a drop shadow to the button*/
-webkit-box-shadow: rgba(93, 100, 106, .75) 0 1px 10px;
-moz-box-shadow: rgba(93, 100, 106, .75) 0 1px 10px;
box-shadow: rgba(93, 100, 106, .75) 0 1px 10px;
}

/***Style the buttons hover and focus states***/
nav#button1 a:hover, nav#button1 a:focus{
color:#e0e0d5;
text-shadow:none;
/*reduce the size of the box-shadow to give an impression of the button being pushed*/
-webkit-box-shadow: rgba(93, 100, 106, .75) 0 0 2px;
-moz-box-shadow: rgba(93, 100, 106, .75) 0 0 2px;
box-shadow: rgba(93, 100, 106, .75) 0 0 2px;
}

Demo 2 Styling...

/***Style the links to looks like buttons***/
nav#button2 a{
padding:10px 10px;
text-transform:uppercase;
text-shadow: 0px 1px 0px #414141;
/*give the button a gradient background*/
background:#401c5b; /*for browsers that don't support gradients*/
background: -moz-linear-gradient(top, #5b44a3, #3a0c33);
background: -webkit-linear-gradient(top, #5b44a3, #3a0c33);
background: -o-linear-gradient(top, #5b44a3, #3a0c33);
background: -ms-linear-gradient(top, #5b44a3, #3a0c33);
background: linear-gradient(top #5b44a3, #3a0c33);
-pie-background: linear-gradient(#5b44a3, #3a0c33); /*IE8 and earlier see CSS3Pie website for more info*/
/*apply a small curve to the button corners*/
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
/*add a drop shadow to the button*/
-webkit-box-shadow: rgba(54,59,64, .75) 0 0 4px;
-moz-box-shadow: rgba(54,59,64, .75) 0 0 4px;
box-shadow: rgba(54,59,64, .75) 0 0 4px;
}

Demo 3 Styling...

/***Set the buttons' hover and focus states***/
nav#button3 a:hover, nav#button3 a:focus{
background:#d08626;
background: -webkit-linear-gradient(top, #d08626, #dda051, #d08626);
background: -moz-linear-gradient(top, #d08626, #dda051, #d08626);
background: -o-linear-gradient(top, #d08626, #dda051, #d08626);
background: -ms-linear-gradient(top, #d08626, #dda051, #d08626);
background: linear-gradient(top, #d08626, #dda051, #d08626);
-pie-background: linear-gradient(#d08626, #dda051, #d08626); /*IE8 and earlier see CSS3Pie website for more info*/
text-shadow:none;
-webkit-box-shadow: rgba(93, 100, 106, .75) 0 0 2px;
-moz-box-shadow: rgba(93, 100, 106, .75) 0 0 2px;
box-shadow: rgba(93, 100, 106, .75) 0 0 2px;
}

Demo 4 Styling...

/***This time each button is going to be a different colour, this is styled using nth-child on the list-item***/
/**all the buttons have the same basic styling**/
nav#button4 li{
padding:5px 20px;
margin:0 18px;
-webkit-box-shadow: rgba(93, 100, 106, .75) 0 0 8px;
-moz-box-shadow: rgba(93, 100, 106, .75) 0 0 8px;
box-shadow: rgba(93, 100, 106, .75) 0 0 8px;
}
/**then use nth-child to apply different colours to each button (see cssdemos.tupence.co.uk/nth-child.htm)**/
nav#button4 li:nth-child(1) { /*first button*/
background: #73a55b;
}
nav#button4 li:nth-child(2) { /*second button*/
background: #5b7ea5;
}
nav#button4 li:nth-child(3) { /*third button*/
background: #9f5ba5;
}
nav#button4 li:nth-child(4) { /*fourth button*/
background: #a5815b;
}
nav#button4 li:nth-child(5) { /*fifth button*/
background: #9da55b;
}

/**IE8 and earlier don't support nth-child but the same effect can be applied by using the Adjacent Sibbling hack instead**/
nav#button4 li {background: #73a55b\9 }
nav#button4 li + li {background: #5b7ea5\9;}
nav#button4 li + li + li {background: #9f5ba5\9;}
nav#button4 li + li + li + li{background: #a5815b\9;}
nav#button4 li + li + li + li + li {background: #9da55b\9;
}

Grains Of Sand Web Design, CSS Demos & HTML5 Templates by tupence