Links that look like buttons but shouldn't

[DeniseColbert]

Why is it a mistake to make links look like buttons?

1. Links and buttons in HTML are different kinds of object. In short, a button does some-thing a link goes some-where.
2. The behaviour of a link is not the same as that of a button. For someone moving around a page using only the keyboard, they follow a link by using the Enter key; a button is activated with either the Enter key or the Space key.
3. Furthermore, links have context menus that allow a user to open the destination in a new tab or window — their choice. Buttons do not present this choice (and might not take a user anywhere).
4. Button styling draws the eye — maybe "I am an important call to action". A group of links all made to look like buttons leaves the user in doubt as to which is the most important

Four good reasons for not confusing our users by making links look like buttons or buttons look like links.

Yes, sometimes our current link styling is not prominent enough to attract a user's attention — making a link look like a button is not the answer. Now that the underlining of links is more flexible (and there are other ways of putting a line underneath a link), we cannot use the original deficiencies of text-decoration: underline; as a valid reason for making links look like buttons. For example, text-decoration: underline; now skips descenders and it is possible to make the colour of the line different from that of the text.

Putting the paragraph containing the link into a CSS island or islet is another way to increase its prominence — see the About page of any of our projects for an example of this technique. NB for obvious reasons, it must be the whole paragraph and not just the link.

[AlOneill]

Description written.

Will work on a gallery of possible link styles, with no promises as to time frame!

[DeniseColbert]

@AlOneill have you had any ideas about possible link styles? Hoping we could sort this in time for FreeBMD2 MVP release (which we are edging ever closer to)

[AlOneill]

My main thought is still to put back the underlining — it is now more targetted which does not compromise legibility. Images for BMD to follow.

It will be a fairly big task to write and check the SCSS — the changes will be complicated (but not complex) by those situations where underlining is very likely not to be required: the main menu, for example.

[AlOneill]

The following image illustrates the possibilities for restored underlining:

[richardofsussex]

Comparing the BBC site menus:

with ours:

I wonder whether the row of 'button-links' in our page should be replaced by a second-level menu bar.

[richardofsussex]

It could, if we want, be styled differently from the main menu bar.

We already have the situation where one of the main menu items ('Logout') isn't strictly speaking a link, but instead triggers a state change. Similarly the 'download' links don't take you away from the current page, but instead create and download a file to the user's machine. Personally I think this mix of actions, state changes and links is OK, but others might disagree.

[DeniseColbert]

Style now in Beta BMD2 on Results page (awaiting fix on space between icons and text, and View links in table styling). Feedback welcome!