MENU

Links & Buttons

Links can be added to your content through hyperlinks in your text, more links, and buttons. Having a CTA (call-to-action) on your page keeps your user engaged and provides the user with an action to do such as “sign-up now” or “register for a course”. 

Text Links & Buttons

Buttons

 Best Practices

Naming a link:

  • Describe where the link will direct the user, such as “Visit the Beedie School of Business website”) instead of using terms as “click here” or “visit site” 
  • Using strong action words, and command verbs to direct users
  • Ex. Subscribe, sign up, Donate, Join now, Download PDF

External links:

  • Always open external links outside of the SFU domain in a new window 

Do Not Link:

  • Avoid links in the following areas to keep a CTA (call-to-action) that is accessible, easy to scan and informative:   

  • Headers (Heading 1 – Heading 5)

  • Within a quote

  • Within hidden toggle content

  • Images, if an image uses a link include a descriptive alt tag 

  • Paragraph text link on a red background, please use a button style instead

Tips:

  • Use broken link checker to find all your sites broken links.

 Design Guidelines

Using the styles correctly in your design:

More Link 

  • A more link should be positioned at the end of a paragraph, or other text 

Buttons

  • Buttons can be placed on their own or placed below a paragraph

White button 

  • is used for moderately important links

Red button

  • is used for most important links
  • Is used on text and image overlay banners

Full width button

  • Is best used on narrow columns or mobile screen sizes
  • Never use a full width button on a wide screen window
more link placed after paragraph
Red button on banner and white button on sub content
button-full alt on mobile

 How to

1. Open your text component or text and image component, by double clicking or right click to edit

2. Highlight the text you want to create a link with and select the hyperlink button

3. In the dialogue window add the URL to the link to field

4. For external links to open in a new window, select the checkbox for open in new window (see best practices)

5. To add "more" link style:

  • Place hyperlinked text at the end or below your paragraph

  • type “more” to the CSS Class field

  • The last link in your text component will be styled as a more link, and any previous links will remain as regular text links

6. To add "more-all" link style:

  • Place hyperlinked text at the end or below your paragraph

  • type “more-all” to the CSS Class field

  • Any links in your text component will be styled as a more-all link.

7. To add a "button" style:

  • Type the button style from the list below into the CSS Class field

Styles:

  • button
  • button alt
  • button-full
  • button-full alt

Note: If you add class “button” to a text component, all links will be converted to a button. You may need to create separate buttons by placing a separate text box and link for each button. You can also add a button below a paragraph.

button alt

  • Turns a hyperlinked paragraph text into a red call-to-action button. 
  • The width of the button depends on the length of copy. 

On Hover: 

  • The button goes from solid red to transparent with a red border. 
  • On a red background the button is solid white and turns transparent with a white border on hover.
  • On grey background the button is solid red and turns transparent with a red border on hover.

button-full

  • Turns a hyperlinked paragraph text into a white / transparent button that stretches to the full width of the column. 

On Hover: 

  • The button goes from transparent with a red border to solid red.  

  • On a red background the button is transparent with a white border and turns solid white on hover. 

  • On grey background the button is transparent with a red border and turns solid red on hover.

button-full alt

  • Turns a hyperlinked paragraph text into a red button that stretches to the full width of the column. 

On Hover: 

  • The button goes from solid red to transparent with a red border.  

  • On a red background the button is solid white and turns transparent with a white border on hover.

  • On grey background the button is solid red and turns transparent with a red border on hover.

Resources

  • To create a list of buttons, see List Component, to automatically generate a list of button links.