CSS3 Demos - Navigation Buttons
You can easily and quickly create navigation buttons from an unordered list, without the need for images, by using CSS3 to style the links.
Examples and Code
Demo 1
See the CSS
Demo 2
See the CSS
Demo 3
See the CSS
Demo 4
See the CSS
HTML
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>
CSS
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;
padding:10px 5px;
width:800px;
}
nav#button1 ul, nav#button2 ul, nav#button3 ul, nav#button4 ul {
list-style-type:none;
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;
}
nav#button1 a, nav#button2 a {
behavior: url(pie/PIE.php);
}
nav#button3 a {
behavior: url(pie/PIE.htc);
}
DEMO 1 Styling...
nav#button1 {
background:#c6c6b4;
}
nav#button1 a {
letter-spacing:0.035em;
text-shadow: 0px -1px 0px #b1b1b1;
padding:5px 12px;
background:#136caa;
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);
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
-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;
}
nav#button1 a:hover, nav#button1 a:focus {
color:#e0e0d5;
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 2 Styling...
nav#button2 {
background:#3c3c3c;
}
nav#button2 a {
padding:10px 10px;
text-transform:uppercase;
text-shadow: 0px 1px 0px #414141;
background:#401c5b;
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);
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
-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;
}
nav#button2 a:hover, nav#button2 a:focus {
color:#eaeacd;
background:#401c5b;
-pie-background:#401c5b;
text-shadow:none;
-webkit-box-shadow: rgba(54,59,64, .75) 0 0 2px;
-moz-box-shadow: rgba(54,59,64, .75) 0 0 2px;
box-shadow: rgba(54,59,64, .75) 0 0 2px;
}
Demo 3 Styling...
nav#button3 {
border:2px solid #90b080;
}
nav#button3 a {
padding:5px 20px;
background:#5d544d;
text-shadow: 0px -1px 0px #b1b1b1;
-webkit-border-radius:25px;
-moz-border-radius:25px;
border-radius:25px;
-webkit-box-shadow: rgba(93, 100, 106, .75) 0 1px 8px;
-moz-box-shadow: rgba(93, 100, 106, .75) 0 1px 8px;
box-shadow: rgba(93, 100, 106, .75) 0 1px 8px;
}
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);
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...
nav#button4 {
background: #eeecda;
border: 2px solid #a59f5b;
padding:10px 5px;
}
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;
}
nav#button4 li:nth-child(1) {
background: #73a55b;
}
nav#button4 li:nth-child(2) {
background: #5b7ea5;
}
nav#button4 li:nth-child(3) {
background: #9f5ba5;
}
nav#button4 li:nth-child(4) {
background: #a5815b;
}
nav#button4 li:nth-child(5) {
background: #9da55b;
}
nav#button4 li:hover, nav#button4 li:focus {
background:#525252;
-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;
text-transform:uppercase;
}
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;
}
Explanations Of The CSS3 Used In The Demo
Browser Support
The demo works in all the latest browsers, including IE9 and lower with the use of CSS3Pie .
More CSS3 Demos This Way