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. Do not use buttons for every link as this is not appropriate and leads to clutter that reduces the effectiveness of all buttons on the site.

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:


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.


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 and click Save.

URL reference

The button displays:

Default button