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

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"> <!--substitute "button" for the appropriate id-->
  • <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; /*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...

  • /***add a background colour to the navigation bar***/
  • nav#button1{
    background:#c6c6b4;
    }
  • /***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...

  • /***Set the colour of the navigation strip***/
  • nav#button2{
  • background:#3c3c3c;
  • }
  • /***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;
  • }
  • /***Style the buttons hover and focus states***/
  • 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...

  • /***Give the navigation strip a border***/
  • nav#button3{
  • border:2px solid #90b080;
  • }
  • /***Style the links to look like buttons***/
  • 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;
  • }
  • /***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...

  • /***Style the nav bar***/
  • nav#button4{
  • background: #eeecda;
  • border: 2px solid #a59f5b;
  • padding:10px 5px;
  • }
  • /***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;
  • }
  • /***Set the button hover and focus states***/
  • 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;
  • }
  • /**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;
    }

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