Skip to main content

What is the Button element?

The button element allows you to include a button linking to a website from your training content.

Lou Monsour avatar
Written by Lou Monsour
Updated over a year ago

Add a customisable button to your training content which, when clicked, links your learners directly to a website location of your choice.

Buttons may be useful when you want to direct your learners to information on a different website, your course's forum, or a different part within your topic. The Button element can be used to link to any URL starting with 'http'.

Expand the section below to learn more.

Steps to add a button to a course


Add the element to your topic or article by selecting the 'button' option from the Content box, then follow these steps:

  1. Choose a layout for your button. Layout options include 'Left', 'Right', 'Above' or 'Below' (which refers to where the button appears in relation to any description text you include). To center your button, select 'Above' or 'Below'.

  2. Choose a size for your button. Buttons are 'medium' in size, by default. However, you also have the options of 'small' or 'large'.

  3. Add a mandatory button label. For example, your button may say 'Click here!'.

  4. Enter your button link/URL into the text box provided, ensuring it starts with 'http'.

  5. Optionally, you can provide button additional information, such as a description, for your button. The character limit for this text is 300 and you can include emoticons, symbols and special characters.

  6. Optionally, you can also change the colours of the button text and background under 'Set colours'.

  7. Click Save.

Note: By default, buttons open new browser tabs when clicked. To change this, untick the 'Link opens in new tab' option.

Examples

Please find below some examples of the Button element:

Note: In the screenshots below, they are taken from a learners perspective of how they appear in the module. There is a section heading (Let's learn about the Button element) and a text element (Below are some example formats for the button element) above each example.

Example 1: Layout - Left, Size - Medium with no additional text
​

Example 2: Layout - Below, Size - Small with no additional text
​

Example 3: Layout - Right, Size - Large with no additional text
​

Example 4: Layout - Above, Size - Large with additional text
​

Example 5: Layout - Below, Size - Medium with additional text
​

Did this answer your question?