Links vs Buttons - The Precise Dev

One fairly common situation to encounter in a design are links that look like buttons or buttons that look like links. I am going to present you with some good practices on how to write code for a design like this.

What’s the Difference?

For the purpose of clarity, the use of the word “link” throughout this post does not refer to the HTML <link> element.

“The <button> HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs a programmable action, such as submitting a form or opening a dialog.”
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

“The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.”
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

TL;DR – buttons perform actions, but links direct the user to somewhere.

An elevator button and an HTML button should not have the same functionality. When looking at a design ask yourself does this “button” take the user somewhere? If so, it should be a link.

Accessibility Considerations

Keep in mind that all of your users may not be having the same experience with the website that you might. Screen readers for the visually impaired are going to read what the element is within the DOM (document object model) rather than what it looks like.

The difference is important because for the visually impaired, the screen reader will read off where a link is going to and whereas it will read the text of the button. Imagine the confusion of a user if they click a button and then are redirected to a new page without being warned.

For links that are disguised as buttons, I still like to leave a visual indicator that the “button” will take the user to a new page. One way of doing that is to apply a text-underline on hover. Here are some WCAG guidelines if you’re interested in reading about making your code accessible for all.

https://dequeuniversity.com/checklists/web/links https://www.accessguide.io