How I can make primary navigation links look more like buttons?

Question

I've recently revamped the navigation bar on my website and I'm trying to explore simple changes that will make the links appear less like flat text, and more like clickable buttons. I've added icons to each, but I think I need to go a step further.

I've toyed with text shadow (inset and offset), different colors, etc. but nothing works quite like I'd like it to.

Any ideas would be greatly appreciated.

Answer 1

HTML Structure

HTML allows you to create buttons (<button>) or links (<a>), which are distinct elements that have implications on accessibility, SEO, and more. In general, use HTML buttons to 'do things', and use HTML links to 'go places'. In your case, use HTML links.

Visual Design

Here are some options open to you:

1. Tactile design: use light shadows and borders to give each button a 'raised' look. Adding textures can also help make them feel tactile.
2. Expected location: If you locate your buttons at the top of your page and there aren't other obvious navigation centers on the page, many users will correctly assume they are buttons because they are in an expected place and there isn't any confusion nearby.
3. Clear separation: your icons are too big. Shrink them so the panel looks neater and so each option's text and icon are more clearly grouped together.

Answer 2

There are many styles that act as visual cues that suggest pressability. Raised bevel, drop-shadow, rounded shinyness (Apple style), etc. You want a style that works with the style of your page as a whole.

In your case one possibility is to make the icons all the same height (the "X" on the expo looks too tall) and then reduce the size of the text. The icon will be emphasized (and icons are by convention clickable) but the text will still be readable.

Another option is to make them tabs. All you need is a single tab shape around the selected item to indicate "all these are navigation tabs". Or you could put tabs around each option, like browsers do, but that's not always necessary and takes up space which may be tight.

There are many ways to go here, you have to decide on what fits best with your site. And don't be to heavy handed, it's already somewhat obvious that those are nav links so you just need a slight emphasis on that to increase its obviousness.

Answer 3

I refer back to the comments to your question in deciding whether you should make the links look like buttons, but if you do decide on going ahead, there are two aspects to this: the first is appearance (how much it looks like a button) and the second is behaviour (how much it works like a button). If there are technical implementation issues that prevent you from making it look exactly like a button, then you could still consider modifying its behaviour (e.g. what it looks like when you hover over or click on the link). From the screenshot it also looks like where you positioned the links might make it difficult to design them different because there are some screen and layout constraints, but for information would be helpful.

Answer 4

Have you worked on css3 ? Are you using HTML 5 ? There may be some other options in HTML 5, I am not aware of them. However, here is some idea on how you could use some css (gradients included :D) to button-ify your text : (This isn't everything but something to get you started). HTH

    border: 1px Solid #3B7882; 
border-radius:4px; 
width: 90px; 
height:27px;
color: #FFFFFF;
background-color: #909090;
margin: 9px 2px 0 0;
width: 4%;
height : 2%;
float: left;
border-top-left-radius: 6%;
border-top-right-radius: 6%;
padding-top: 10px;
padding-bottom: 12px;
cursor: pointer;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(1, rgba(134,130,122,0)), /* Top */
color-stop(0, rgba(134,150,101,45)) /* Bottom */
);
/* for IE  */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#368655E, endColorstr=#848176)";
background: -ms-linear-gradient(top left, #368655E, #848176);