Recreating CNN’s Beveled Navigation Buttons with Pure CSS

When CNN recently redesigned their website, they created a strongly-branded and beautiful header section that includes a navigation bar with beveled buttons. Although CNN’s navigation bar utilizes CSS sprites for highlighted and active buttons, the primary design of the buttons (the beveled effect) is done with pure CSS.

I think this is a commonly-known technique among experienced CSS developers, but many beginning web designers will probably resort to images to create this effect, which is not necessary. So, in this brief tutorial I’ll show you how to create a navigation bar with beveled edges using pure CSS, identical to that on CNN.

View the demo page to see exactly what we’ll be creating.

First, the markup, which is nothing unusual, just an unordered list:

view plaincopy to clipboardprint?

1. <ul id="navigation">
2. <li class="first"><a href="#">Homea>li>
3. <li><a href="#">Videoa>li>
4. <li><a href="#">NewsPulsea>li>
5. <li><a href="#">U.S.a>li>
6. <li><a href="#">Worlda>li>
7. <li><a href="#">Politicsa>li>
8. <li><a href="#">Justicea>li>
9. <li><a href="#">Entertainmenta>li>
10. <li><a href="#">Techa>li>
11. <li><a href="#">Healtha>li>
12. <li><a href="#">Livinga>li>
13. <li><a href="#">Travela>li>
14. <li><a href="#">Opiniona>li>
15. <li><a href="#">iReporta>li>
16. <li><a href="#">Moneya>li>
17. <li><a href="#">Sportsa>li>
18. ul>

 	
Home
 	
Video
 	
NewsPulse
 	
U.S.
 	
World
 	
Politics
 	
Justice
 	
Entertainment
 	
Tech
 	
Health
 	
Living
 	
Travel
 	
Opinion
 	
iReport
 	
Money
 	
Sports
 
 

The only thing to note in that code is the class “first”, which will help us round out the effect.

Here’s the CSS for the

element, which has an id of navigation:
1. #navigation {
2. list-style: none;
3. background: #b60002;
4. overflow: hidden;
5. width: 962px;
6. }

#navigation { 	list-style: none; 	background: #b60002; 	overflow: hidden; 	width: 962px; } 

The primary navigation element above is styled with a set width, a background color, and a set height. The width is not that important, but it ensures that the element can be centered using margin: auto.

Next, we need to style the individual

• elements. Here’s the code:
  view plaincopy to clipboardprint?

  1. #navigation li {
  2. float: left;
  3. border-right: solid 1px #ca0002;
  4. height: 35px;
  5. }

  #navigation li { 	float: left; 	border-right: solid 1px #ca0002; 	height: 35px; } 

  The height matches that of the

  element, and each
  • element is given a solid right border, the latter of which constitutes the first part of the beveled effect.

    Next are the anchors inside the

  • elements. Here’s the CSS:
    view plaincopy to clipboardprint?

    1. #navigation li a:link, #navigation li a:visited {
    2. text-decoration: none;
    3. display: block;
    4. height: 35px;
    5. color: #fff;
    6. line-height: 35px;
    7. padding: 0 9px 0 9px;
    8. border-right: solid 1px #990000;
    9. font-family: Arial, Helvetica, sans-serif;
    10. font-size: 12px;
    11. font-weight: bold;
    12. }

    #navigation li a:link, #navigation li a:visited { 	text-decoration: none; 	display: block; 	height: 35px; 	color: #fff; 	line-height: 35px; 	padding: 0 9px 0 9px; 	border-right: solid 1px #990000; 	font-family: Arial, Helvetica, sans-serif; 	font-size: 12px; 	font-weight: bold; } 

    The important things to note above, again, is the right border setting, which is the second ingredient for getting the beveled effect. Thus, the color of this border is darker than the border on the

  • element. The rest of the CSS shown above is trivial, making the buttons look similar to those on CNN’s website.

    So, although we can’t create a double border on a single element without images, we can get around that by taking advantage of the nested elements that are part of every navigation bar, the anchor and the list item.

    Next we give each button a hover state:

    view plaincopy to clipboardprint?

    1. #navigation li a:hover {
    2. background: #990000;
    3. color: #fff;
    4. }

    #navigation li a:hover { 	background: #990000; 	color: #fff; } 

    The result is missing just one element. Since each button has a double border on the right, that means the leftmost button will not have a border on the left. So, we add a class to the first

  • element to give that button a left border, which completes the look:
    view plaincopy to clipboardprint?

    1. #navigation li.first {
    2. border-left: solid 1px #ca0002;
    3. }

    #navigation li.first { 	border-left: solid 1px #ca0002; } 

    It’s that simple. No need to slice up images in Photoshop; you can create a simple, yet beautiful beveled effect with some pretty straightforward CSS.