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.

enter image description here

Any ideas would be greatly appreciated.

  • 1
    You could turn them into buttons ;) . It's not clear, however, that you need to do so. Non-button navigation links are very common on the web and, as such, users are generally used to them. Have you identified an actual usability problem? Commented Mar 13, 2013 at 21:09
  • This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, see the FAQ. Commented Mar 13, 2013 at 21:10
  • 2
    @CharlesWesley With respect, I disagree. This question is a case of how to design links so they give a good UX to visitors. I can see how others working on link design could use this question and its answers for pointers on designing their own site.
    – sscirrus
    Commented Mar 13, 2013 at 22:13

4 Answers 4


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.

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.


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.


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; 
width: 90px; 
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(
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);
  • 2
    While this answer may be of some help to the asker, it's outside the scope of what UX is about. Commented Mar 13, 2013 at 22:01
  • Yes, it's not really a UX answer currently, it's an implementation answer. we don't really offer code-only answers here as UX isn't about implementation. However if you can describe what the effect is that this css would render (with actual imagery ideally) and explain why this suggestion is appropriate and solves the OP question then that's more suitable an answer.
    – JonW
    Commented Mar 13, 2013 at 22:13
  • Sure JonW. TO understand What the above css does is, to know how a button visually looks like on a computer screen. If you look at any button, it generally is enclosed in a border and upon clicking that button the area within that border changes shades and additionally the border may appear to have some shading around its corners thus giving the experience of a button being engaged. Does it make more sense now ? Commented Mar 14, 2013 at 13:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.