Links and buttons

Proper use of links and buttons helps people navigate digital content more quickly and effectively.

Clear, descriptive labels and consistent styling helps users know what to expect when activating a link or button. Labels also help people using screen readers understand the purpose of a link or button without having to read the text around it.

Links take users to new content, while buttons perform actions. 

When adding a link in a document or webpage, write unique, descriptive link text that describes the destination of the link. For example, a link that says “UW–‍Madison majors and certificates” will be easier to understand and use than a link that says “Read More” or is simply the URL pasted in text.

When adding a button in a webpage, start with an action verb and use concise text. For example, a button that says “Submit application” is better than “Click here to submit.”

Styling guidance

To ensure users can easily identify and use the links and buttons in your content, follow this styling guidance:

• Make links stand out visually.
  • Do not rely on color alone to indicate a link. Use an underline to ensure people can tell it’s a link regardless of color.
  • Ensure good color contrast between link text and regular text. If a link is not underlined, it must have a contrast ratio of at least 3:1 with the surrounding text.
• Ensure good color contrast for button text and colors used.
  • Button text should have a contrast ratio of at least 4.5:1 with the button fill color.
  • Button fill color should have a contrast ratio of at least 3:1 with the background page color.

Best practices for link behavior

• Links should open new content in the same tab when possible, unless the user is completing a task on the current page and opening a link would erase their progress.
• Inform users in the text or using HTML tags if a link will open a new tab or window.
• Inform users if a link will open or download a special file type like a PDF.

• Use links to open new content; use buttons to perform actions
• Use concise labels for buttons, often starting with a verb
• Write unique, descriptive link text
• Make links stand out from regular text (typically blue and underlined)
• Ensure good color contrast for text used in links and buttons
• Open new content in the same tab when possible, and warn users if it won’t
• Warn users if a link will open or download a special file type like a PDF