Button

Uses

A button gives your visitors an easy way to get from your page to another relevant page.

Examples

Many faculty pages use buttons to invite students to browse their programs:

The John Molson School of Business uses buttons, formatted as blocks, to link to information for different audiences:

Best practices

Label

• The label (also known as the button text) should be short and specific. It should give your website visitors a clear idea of what they can expect if they click on that link.
  • Bad label: Learn more.
    It's short but not specific. What will they learn more about?
  • Better label: Learn more about Fine Arts programs
    It's specific but a bit wordy. Whenever possible, replace wordy phrases with more concise ones, e.g. Explore, Discover, Apply, View, Download.
    
  • Best label: Explore Fine Arts programs
    It's short and specific.
    

For more advice on writing effective labels, watch this short video:

Link and Target

If you're linking to a Concordia web page:

• In the Link field, use the magnifying glass dropdown to navigate through the tree to the page you want to link.
  
• Set the Target to Self, so the link opens in the current tab.

If you're linking to an external website:

• In the Link field, add the URL.
  
• Set the Target to Blank, so the link opens in a new tab.

Button block

• In the button component settings, only select Button block when placing buttons side by side in a Column control.
  
• When displaying buttons side by side in a Column control component, select Equal height in the Column control.

Accessibility

• Ensure button text is short and specific.
• If you're using a Button block, set the Button style to Large or X-Large. This makes it easy to read.

Design options

Button styles

AEM has numerous button styles.

• Don't use the Default button style. We have nicer styles available!
  
• Choose the style and colour that fit best with the existing elements on your page.
• Use only 1 or 2 button styles on a page.
  
• Use only 1 or 2 button colours on a page. Using more can make your page look cluttered.

Ghost light, dark or burgundy

This is our newest button style, and the one we use most frequently. It works best for strong calls to action that are 4 words or less. You'll frequently see a ghost button or two below a paragraph of text. For example:

Use no more than 2 ghost buttons together. Having 3+ ghost buttons together looks crowded and makes it harder for visitors to decide what to do next.

Only select Ghost (Light) if the button will be on a dark coloured background. For example:

Burgundy (arrow link)

This button style is best for long calls to action. It's typically used to emphasize steps in majors processes. Only use it on a light background. Only capitalize the first word and any proper nouns. For example:

Simple (forward arrow)

This style is useful for calls to action that are 5+ words. Write the link text in sentence case, i.e. capitals only on the first word and any proper nouns. For example:

Note: If you're using Firefox to view a page, you'll see the button text but not the forward arrow. On Chrome, both the button text and forward arrow display as intended.

Simple (back arrow)

This button style should be used to go back to a parent page, like from an Event page back to the Calendar; or from a profile back to the list. Write the link text in sentence case, i.e. capitals only on the first word and any proper nouns. For example:

Large

This button style works well for strong calls to action. Ideally, it shouldn't exceed 4 words. For example:

X-Large

If your website has an existing Column control with button blocks, the style should be set to X-Large and the Column control should be set to Equal height.

Try it out!