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.


Book

Affiliate

elegant wordpress themes

This Post Has 17 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.

    • Jeff Reply

      You’re conflating the user’s needs with the DOM’s needs. If the DOM needs to know it’s a button but the user does not… then style it that way. Because a user who is **visually** browsing your website will see the visual cues you’ve created.

      The DOM needs to know the semantics and doesn’t care what it looks like.

      Another (different) example: You could style an tag bigger than an tag if that provides visual meaning and cues to the user (for whatever reason).

      But this won’t make sense to the DOM as the DOM won’t know that the is more significant than the … so it wouldn’t make sense to do this (the user might understand, but the DOM doesn’t).

      For users who do not use the visual (e.g. a blind user who uses a screen reader) the DOM will misinterpret your design.

      But… If the tag was truly more important and the tag just was bigger for no real reason (perhaps maybe you’re demonstrating you can change the size of an h3 tag), then it would make sense to go ahead with the change.

      UX design is designing for both the user and the DOM.

  12. Tee Reply

    Great article and great point. I totally agree here.
    Lets say you have a signup form. Two clickable elements. “Sign up” and “read more” . I think we all agree that in this case, sign up is a button and read more is a navigational link to a new page og more info about why signing up. Great!
    But, an important aspect here is visual hierarchy. what if you have a page with no buttons to start any process, no call 2 actions. Lets say you have a page with 5-6 links to different parts of your website. AND some of these should be more prominent due to user insights. How do you make those stand out more? Do you only increase font size? , do you use another underline style? I see some people use ghost buttons/secondary buttons for this but then i feel we break this convention.

  13. Sean Beld Reply

    A clearer, more bulletproof description of the difference between a btn and a link cannot be found. Well done. Worth noting that observing these differences is crucial to meeting WCAG 2.1 – 4.1.2: Name, Role, Value

  14. Jeff Reply

    I think sometimes you break the rule — when you want something to stand out / you **will** be making a change to frontend or backend in the future.

    For example, if you have a call to action to “sign up”, you may be “linking to the sign up page”. Would you agree that it would still be okay to use a button (semantically)?

Leave a Reply

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