How to Create HTML Buttons in Assessments

Use these provided the HTML codes to create any kind of Button supported by Brillium.

Most fields in Brillium support HTML. This means that assessment authors can include styled objects in assessment Agreement, Instructions, and Feedback screens. In fact, even some of the Assessment UI fields can include HTML. This process can seem quite technical at first, but with some practice, it can significantly improve the look and feel of the assessment experience.

This article provides the HTML codes to create any of the Buttons supported by Brillium. Buttons can be very useful when linking to external content such as websites, documents, or training hosted on a Learning Management System (LMS).

Button Types

Brillium has several button types. Below are examples of the different button styles and the HTML code to create each button type in Brillium. 

NOTE

HTML displayed in the Brillium assessment authoring experience will appear differently than when it is displayed in the Brillium assessment experience. It may seem that the button is not displaying correctly when creating a button, but it will display properly when rendered to learners during the course of an assessment. To see this, you can always preview your assessment to ensure that it displays HTML properly.

How to Create a Button in a Brillium Text Field

  1. In a Brillium text field, select the Code View button from the Rich Text Editor tool bar (the </> symbol)
  2. Paste in the appropriate button HTML code for the desired button type
  3. Select the Code View button and add any additional text, images or video
  4. Save the changes

NOTE

A button can be placed anywhere amongst text, images, or video. The example HTML code below uses "https://www.example.com"" as the destination when clicked. Replace this URL with the desired web URL when using the button code below.

Button Styles

Pill Button

<a class="button button-pill" href="https://www.example.com">BUTTON TEXT</a>

Square Button

<a class="button button-small" href="https://www.example.com">BUTTON TEXT</a>

Large Button

<a class="button button-large" href="https://www.example.com">BUTTON TEXT</a>

Hollow Button (Neutral)

<a class="button button-hollow" href="https://www.example.com">BUTTON TEXT</a>

Alternate Button

<a class="button button-alt" href="https://www.example.com">BUTTON TEXT</a>

Disabled Button

<a class="button button-disabled" href="#">BUTTON TEXT</a>

Expanded Button (displays across entire screen)

<a class="button button-expanded" href="https://www.example.com">BUTTON TEXT</a>

NOTE

Button color does not need to be defined. Buttons will take on the color as defined in the selected Assessment Theme (selected in Assessment Builder under the Properties tab). When changing the Assessment Theme, the button color will automatically adapt to the selected theme color.