Love this write-up from Eric Bailey at css-tricks.com about what makes a good download button.
Not just talking about buttons but links in general, here’s my take on this topic.
Buttons
Like this post’s title says, buttons in websites should do things when clicked/tapped like they do in desktop and mobile applications, and in physical devices and machines.
If clicking a link or a button automatically installs something on the user’s end, please specify and state this action. “Download” means to save something on the user’s end and should not install nor do any other unprecedented action yet.
Use text with or within the image/design for buttons as much as possible unless your expected users are already familiar with the design you are using (e.g. social media logos).
It’s a rare sight nowadays, but please don’t design something to look like a button when interacting with it does nothing. It can be misleading. In some cases, it can make the user think that “button” must be broken.
Text links
Text links are best used in directing the user to another web page, especially inline anchor links.
I always appreciate seeing underlines or bottom borders for inline text links instead of simply giving them a different color from the rest of the text content. Not everyone sees color the same way. Increase font weight or italicized text if you need to emphasize something that’s non-link instead of using underlines on them to avoid confusion with actual links.
Eric mentions in the article that it’s “good practice from both a user experience and an accessibility perspective is to create a distinction between internal and external links”. I couldn’t agree more, especially for inline text links. I even use the “External Links” plugin on this website for that purpose.
Text link or button?
Unless the context of the content clearly explains that clicking/tapping a text link downloads or installs something instead of directing the user to another page, it makes more sense for the user to use a separate download button to do that action.
Sometimes as exceptions it is beneficial for both parties to have links as buttons e.g. call-to-actions like “Subscribe”, “Go to Cart”, social media links (e.g. Facebook icon instead of the text “Facebook”). It provides clear direction for the user on what to do next, and is good for conversion as well.
Extra tip
Add a tooltip or even a simple title attribute with a descriptive value on your links and buttons as much as possible. It’s additional work, but users will appreciate the effort especially for cases where an inline link does something (e.g. downloads a file or installs an app) instead of simply directing the user to another web page.
User’s deserve to know what they’re getting into or where they are headed for before they take an action.
