đŸ‘‹đŸœ We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

When to Use Buttons and Links

4 min. read

Learn the difference between a button and a link, when to use which, what are their states and style, and what are the differences between calls to action.

There is an old adage from the 90s and the early internet design era: "Buttons are for actions and links are to go somewhere."

While that is a helpful starting point, these decisions are not always that simple.

Before we get started, let's define what we have to work with.

  • Links - text that can be clicked or tapped
  • Buttons - a boxed area that can be clicked or tapped

Buttons can be styled in many different ways, but it is important to realize there is an area around the text of the button that can be clicked, not just the text itself.

Buttons and links from the Bootstrap Default Theme, a responsive web framework.

When to use which?

In order to decide on which element to use, you need to think of the screen action hierarchy.

First, you want to think of the primary task you want the user to accomplish on each screen. That should be a button. Actions that are most important should be more visible. That one action we call the Primary Call to Action. There should only be one per screen.

Secondary actions can also be buttons, but you shouldn't have tertiary actions as buttons. Items that are low effort or not as important should be links.

Links should never be used to change the state of an application. This means that clicking on a link should not add, change, or delete any data on the screen, So, a delete action should never be a link, nor should a save action.

The bright orange button is used for the primary call to action, while the transparent button is the secondary action and lower in the visual hierarchy.

Let's look at a more complex example.

Starting from the top, there are 2 links that both say "Details." When you click on them, a pop-up opens to tell you more about Free Shipping. Now is that an action or is that going somewhere? Well, with our framework, it doesn't matter as much. It is more about the importance of the action. Letting people know the details about free shipping is a tertiary action and of lower importance than say, buy.

The next two items are both links as well. Clicking on the company name takes you to a new page, which is the Seller's profile. The second link, Fulfilled by Amazon, brings up another pop-up.

The next item down is a link. Clicking on it opens a pop-up telling the person about the benefits of Amazon Prime.

Finally, after 5 links of extra information, we get to the button. That button is a nice golden color, it has an icon and clear text. You know what is going to happen when you click on that button. It stands out from all of the other items on the page. It is the Primary Call to Action.

You'll notice below that button a few more links, and then two more buttons. However, notice that both buttons are a different color, therefore secondary to the primary call to action. Also, one of the buttons is smaller, so it is of even less importance.

The Share link at the top also opens a pop-up.

On the desktop, buttons usually have 4 states: On (default, not clicked), Hover (or rollover), Clicked/Selected, and Disabled.

On the desktop, links usually have 4 states: On (default, not clicked), Hover (or rollover), Visited, and Disabled.

On mobile, there are just 3 states for buttons: On (default), Tapped/Selected, and Disabled.

On mobile, there are just 3 states for links: On (default), Visited, and Disabled.

Four buttons that show different states: On (default, not clicked), Hover (or rollover), Clicked/Selected, and Disabled.

Buttons can be a box with text in the middle, or something more creative:

Set of buttons that show different states with unusual forms. Set of creative buttons that incorporate arrows. Set of buttons with icons next to the button names.
Images found on Google Image Search. Created by: Montse Anderson, Claudia Monroy, Cristian Eslava

We've all seen links that say "click here" or "read more" and buttons that say "Learn More." Keep in mind this type of writing is not the best practice or good for your users. There are 3 reasons for this:

  1. It's a generic phrase that doesn't give context to what you are about to interact with.
  2. For accessibility, it leaves blind people lost with what they are clicking on.
  3. Finally, it can hurt the SEO of your website.

You always want to be as transparent as possible with your text on buttons and links. On buttons, it also pays to be succinct. For example, "Add to Cart" is an excellent phrase for a button. What about "Send Data"? Well, where is the data being sent? How is it being sent? A better wording would be, "Send Data via Email."

Finally, we have menus. These are a collection of buttons or links for the purpose of having a primary set of actions to navigate a website or app.

Now, look at the menu above from Google Drive. Are those buttons or links? So it is actually one button and a list of links. The links have icons to the left of the text. Like buttons, links can be styled as well.

However, keep in mind that a menu that uses just icons has a strong tendency to decrease in understanding and usability for users. It is best practice to always use text with icons if you are going to use icons.

Summary

We learned about using buttons versus links. Also, how the style can vary greatly. The interaction you intend and the hierarchy of that interaction on the screen can help you choose when to use which type of element.


Additional resources


By Julia DeBari
Got questions or feedback? Email learn@balsamiq.com.


Related Articles

Common Website Mistakes and How to Fix Them

Learn how to improve your website’s user experience! For each mistake you’ll learn what usually happens and why, what it looks like, and what to do about it.

By Leon Barnard

How to Help People Avoid and Recover From Errors in Your UI Design

Error management: help people avoid errors in the first place, see the error, and understand what's happened — and add instructions on how to recover from it.

By Donna Spencer

How to Design a Sign-Up Flow: Balsamiq Cloud Case Study

Designing a Sign-Up flow for a web app is much harder than you’d think. It requires a balance between usability and security, with a sprinkle of marketing on top.

By Peldi Guilizzoni

Get the Inside Scoop!

Want to get exclusive early updates on our
Products, Wireframing Academy, and our Company?

Subscribe to our monthly newsletter and be part of our Inner Circle!

See what people think of our past issues!

Dazz Knowles
"Of all the e-mail newsletters I get, @balsamiq is the one I always read, they're brilliant!" - Dazz Knowles
M. Pesente
"It's always a big pleasure receiving such an inspiring newsletter. Love the Balsamiq culture!" - M. Pesente
Jérémie André
"Another great newsletter from @balsamiq!! 😁" - JĂ©rĂ©mie AndrĂ©
Looking for more ways to get closer to Balsamiq? Join our Research program or Slack community!