Links can be styled as buttons to bring more emphasis to them as primary actions on a page.

Generally, only 1 or 2 buttons should be used per page so the user has a clear action point.

Example button

Buttons can be added by the following methods:

Step 1

  1. Highlight the text to be made into a button
  2. Click the link icon on the WYSIWYG editor to open the link dialog window.

Select text to be converted to a button

Step 2

The link dialog window appears. On the Link Info tab:

  1. select the link type
  2. insert the link path.

Insert link for button

Step 3

On the Advanced Tab, enter button in the Stylesheet Classes field. 

Note: classes are case sensitive.

Insert stylesheet class button

Step 4

Click OK and the button displays.

Note: the button width setting reflects the text width plus padding.

Example of button

The button displays:

Register


Making buttons display full-width

Right click on the button and select Edit Link

Edit Button link

On the Advanced tab of the link dialog window, enter button expand in the Stylesheet Classes field.

Stylesheet class button expand

 

Click OK and the button is saved. The button now displays at 100% width of its container.

Register

Step 1

Click Source icon in the WYSIWYG editor.

Select Source code

Step 2

Insert the cursor in the location where the button will display. Insert the code of the button type.  In this scenario, the Default Button will be inserted using the code: <a class="button" href="#">Default Button</a>

The # symbol refers to the URL that will be inserted.

inserted code

Step 3

Replace the # in the code with the URL that it should link to. In this instance, the # has been replaced with http://jobs.uq.edu.au/caw/en/listing/ and click Save.

URL reference

The button displays:

Default button