Button with two cursors, pointer and default

Jeremy Keith, in the chapter 2 of his book Resilient Web Design speak about the principle of material honesty in architecture, which says that one material cannot be used to replace and imitate another. The same analogy is made by Kevin Goldman in Material Honesty on the Web, citing this quote by John Ruskin:

«To cover brick with plaster, and this plaster with fresco, is perfectly legitimate… But to cover brick with cement, and to divide this cement with joints that it may look like stone, is to tell a falsehood; and is just as contemptible a procedure as the other is noble.»

In the web, we have buttons and links. Often they are used interchangeably, but they are made with different materials, and given the principle above, we should not be dishonest when using them. No mather that with CSS we can make a link looking like a button and viceversa. They are different, because the browser treats them differently.

If we right-click a link, we can see the contextual menu with options such opening in a new tab, saving to favorites, sharing or sending to another device.

Contextual menu of a link

A button, on the other hand, is used to send form data or to perform specific actions within a page. So it doesn’t make much sense to save that action or share it on social networks. The contextual menu of a button is completly different:

Contextual menu of a button

Therefore, we are talking about two different materials, with different behaviors and features. The problem is that in the real world these two elements are constantly mixed and with CSS we can make them practically indistinguishable at first glance because code like this:

<a href="#" class="button">Action 1</a>
<button class="button">Action 2</button>

One way to distinguish between a link and a button is precisely by the cursor. The ability to know that an element is a link because the cursor is a pointer is, somehow, a way to giving back some honesty to the web design.

Of course, there will always be unconvinced people with arguments such as:

«If the cursor is not a finger, it does not seem clickable!!»

A well-designed button does not need to change the cursor to notice that it’s clickable. It’s much better to design elements that are visually apparent than expecting people to discover them by moving the mouse over the screen. If that were the case, people using a smartphone wouldn’t know how to interact with the site.

We have the possibility —highly recommended— to change the style of a button on :hover, it’s not necessary to change the cursor too. So let’s use it to identify the links.