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:

<ul id="navigation">
  <li class="first"><a href="#">Home</a></li>
  <li><a href="#">Video</a></li>
  <li><a href="#">NewsPulse</a></li>
  <li><a href="#">U.S.</a></li>
  <li><a href="#">World</a></li>
  <li><a href="#">Politics</a></li>
  <li><a href="#">Justice</a></li>
  <li><a href="#">Entertainment</a></li>
  <li><a href="#">Tech</a></li>
  <li><a href="#">Health</a></li>
  <li><a href="#">Living</a></li>
  <li><a href="#">Travel</a></li>
  <li><a href="#">Opinion</a></li>
  <li><a href="#">iReport</a></li>
  <li><a href="#">Money</a></li>
  <li><a href="#">Sports</a></li>
</ul>

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 <ul> element, which has an id of navigation:

#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 <li> elements. Here’s the code:

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

The height matches that of the <ul> element, and each <li> 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 <li> elements. Here’s the CSS:

#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 <li> element. The rest of the CSS shown above is trivial, making the buttons look similar to those on CNN’s website.

<

p>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:

#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 <li> element to give that button a left border, which completes the look:

#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.