WordPress-Buttons and Links

Owned by Thomas Rose-Bolden
Nov 01, 2024
2 min read

Buttons 

  • Should contain actions 

  • Be consistent across pages: Log in, Email Us, etc) 

  • Avoid multiple primary CTAs on the same page 



Orange buttons: A primary CTA, form submission or other important action. Use sparingly.  



Dark blue: An important CTA, but may be more than one on a page. Less prominence than orange buttons and a good choice to indicate next steps in a user journey. 

Two CTAS: These are of equal weight/importance. Do not use two orange CTAs next to each other. 

Two CTAs: Dark blue is the primary action here. 

Outlined buttons communicate an action is available, but is not a next step/direction. More of a supplementary action. 

Button Admin View

 

Links: Files

  • File names should be lower case with dashes, no spaces. Dental-handout-2017.pdf

Links: Hyperlinks

  • Warn users with visual cue if they will be leaving the site 

  • Allow user to choose where new tabs open (do not force users to open pages in new links)

  • Do not use vague links (click here, read more). Vague links are bad for usability and also don't provide users with adequate information to complete an action. Use specific links such as "Download the "Practice Tips" Article (PDF)" or "Visit the Dental Practice Website".

  • Give users context on where they expect to go: “download file”, “visit site.”  

  • Do not dump lists of links with no context. Add a quick summary of what the link is.