Links and buttons

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 take users to new content; use buttons to perform actions
• Make links stand out visually (typically blue and underlined)
• Ensure good color contrast for text used in links and buttons
• Open new content in the same tab when possible