Buttons

When to Use a Button or Link

The button and link have co-existed on websites for a long time. But the problem most designers have is knowing when to use which. The question to ask yourself when you’re not sure is, “Will this action affect the website?” Your answer will indicate whether you should use a button or link.

Links usually outnumber buttons on a website. This is because buttons are images that take time and effort to create. All that’s needed to create a link is the HTML code. As a general rule, use buttons sparingly and on the most important actions and links for less important actions. Too many buttons can make your website load slow and key call-to-actions hard to find.

However, to know when to use one or the other in a specific situation, you must understand that every action on a site falls under two different categories:

  1. Actions where users affect the website’s back-end or front-end
  2. Actions where users won’t affect the website at all

Actions where users affect the website itself is where you use a button. For example, sign-up and purchase actions are often buttons. The user in these situations are creating a new account and completing a monetary transaction, which are actions that affect the website’s back-end. Creating new posts or making comments are actions that change a website’s content and what the user sees. These actions affect the website’s front-end. Whenever there’s a change in the website’s back or front-end is when you use a button.

Actions where users won’t affect the website are where you use a link. These are actions that take users from one page to another without changing anything on the website’s back or front-end. The user is a spectator browsing through content. They aren’t doing any actions that require more effort than clicking and viewing. The back-end and front-end of the website remains the same. It’s these situations when you should use a link over a button.

Most designers know to use buttons on key call-to-actions, but not many of them know why. After you ask yourself, “Will this action affect the website?”, you’ll know whether to use a button or link and why it makes the most sense.


JOIN OUR NEWSLETTER
Get notified when we publish our next article

eBooks

Toolkits

Affiliates

elegant wordpress themes chemicloud.com hosting

Article written by anthony

Author and founder of UX Movement. Creating a more humane world for users by teaching others how to practice UX the right way through principled design techniques.

This Post Has 13 Comments

  1. Pritam Pebam Reply

    I think Users trust buttons more than links…
    and can you please elaborate what you mean by “but tons can come in dif fer ent sizes, col ors and styles”??? Why can’t we just style the links to look like a button??

    • anthony Reply

      What I mean by that is that buttons give you more flexibility in how you style them. You can choose your own color, gradient, size, font, shape and placement for it because a button is essentially an image that stands on its own.

      Links compete with text so they require a level of standardization and consistency in order to communicate that it’s an affordance. Because of this you lose flexibility in how you style your links. If you wanted to make your links look like buttons by putting parenthesis around them that doesn’t seem like a problem if the link navigates you to specific content, but buttons should definitely be used for actions of commitment.

  2. Hemanshu Reply

    Yeah, I completely agree here.. buttons for actions and links for navigation 🙂

  3. J. Albert Bowden II Reply

    sorry, but can you define button and link in this context, i’m not sure if you are talking about anchor elements as links, button elements for buttons and/or input elements with an attribute of button.

  4. Travis Reply

    I try to limit the use of buttons for things that are actually committing an action. Examples: logging in, submitting a form, posting a comment, etc. I use links for things that trigger other actions. Examples: showing a form to post a comment (wherein a button is there to commit the comment). Whatever you choose to do, I think there should be a differentiation and consistency in how you use links vs buttons so users get used to the difference (whether they notice it or not).

  5. Erica DeWolf Reply

    Great post! I think the question also becomes what the goal of your page is. If it’s a landing page, and you want somebody to perform a call to action- then a button should be used, as it has been proved more effective in this situation.

    Thanks for the info!

  6. Aaron Reply

    Nice.
    Here I leave you an old but still good article about links and buttons from Jakob Nielsen’s web.

    http://www.useit.com/alertbox/command-links.html

  7. BURKE Reply

    This is a great discussion, and one that most designers don’t understand. The idea of when to use a link or a button. The Jakob Neilsen article is a great one! However, moving forward, it fails to describe what happen when there are several call-to-actions on a page, or more specifically within a content grouping.

    For example, log in components that ask users to “submit” or “forgot password?” Forms that allow users to “submit” or “clear”. It’s important to understand primary vs. secondary, or even tertiary actions.

    Rule of thumb.. Your primary action gets the button, while secondary and tertiary actions need to default to a link representation. This way the primary action receives the most visual weight, or prominence, thus encouraging users to take that action over the others. Hope this helps everyone.

    • Irla Rebelo Reply

      I do agree! Buttons for Primary action, if possible only one – the one that goes with the BEST CASE SCENARIO or the MOST COMMON SCENARIO. This button is a call for action or a NBA – next best action. Secondary and Tertiary actions should not compete with a primary button. I always try to hide them until required or display them as links.

  8. Arvind Reply

    Great article, I have been troubled by this for a while. However I still dont know how to put this into a UI guideline document?

    Edit, is a link or a button? Remove? Add?

  9. John Reply

    I think a simpler definition is to use a link for navigation and a button for an action. A link just navigates you to some other content. An action is what you said about signing up or posting a comment.

  10. Martin Labuschin Reply

    Users don’t differentiate between buttons and links and front-end and backend. Buttons are just bolder than links for them. It’s about design.

    Use buttons for primary actions (navigate, submit, order) and links for secondary actions (abort, cancel)

    In the end, a button could be styled as a link and vise versa. So technical details aren’t the issue here.

  11. joe Reply

    Actually technical details can be important here. It would go against some users expectations (for example a user with low vision, who can’t see the styling) to click a button and go to a new page with no action performed. The proper labelling of buttons and links in the DOM is important to users who don’t have the same visual context. Please don’t purposely style your links as buttons or vice versa. It can be confusing.

Leave a Reply

Your email address will not be published. Required fields are marked *