To make the navigation links look like buttons, we will add padding and a bottom border to each link.

div#sidebar a { display: block; text-decoration: none; background: #fc3; color: #333; padding: .2em .5em; border-bottom: 1px solid #f60; }

The padding values move the link text away from the edges of the containing block and adds space between each link. I have used .2em as the top/bottom padding and .5em for the left/right padding. You may adjust these measurements to suit your needs.

Note: If one of the links contains a long word(s), you may want to either use less left/right padding or widen the sidebar DIV containing block so that the link text will fit. We will discuss link width in more detail on the next page.

Setting a border-bottom color is what separates each button graphically. I used a complimentary darker orange color in my example below-left.

Another common strategy is to make the border color of the menu links match the background color of the page. In the example below-right I removed the border from the sidebar container DIV, set the link's border-bottom to match the page background color, and increased the border width to give the buttons a separated appearance.

example at this point.
Note: You may also alter the A link font attributes. For example, you may want to make the button text bold or choose a different font-family for the navigation buttons.

Next we will focus on the subject of link width. Remember that the width property is a measurement applied to the content area of an element box.