Skip to Main Content Open Alternative Formats of This Page

eConnect, Self-Service and Colleague​​ will be unavailable on Sunday, Sept. 21, from 1 a.m. until 2 p.m. for maintenance​. We appreciate your patience.​​

Buttons

Apply button style to a link using the button-blue/red/grey custom formats (Format > Formats > Custom Formats > button-blue/red/grey).

Ensure that the whole link is highlighted. For an internal link clicking the link will do this, for external links drag using the cursor or click in the link and then click the a in the bar along the bottom of the editor window e.g.:

Screenshot showing show to select an external link

Would also recommend that the button style is applied to text after a link is added.

Buttons: Standard

Apply button style to a link using the button-blue/red/grey custom formats (Format > Formats > Custom Formats > button-blue/red/grey).

Buttons: Standard External

Button Text Button Text Button Text

Button Text Button Text Button Text

Buttons: Standard Internal

Button Text Button Text Button Text

Button Text Button Text Button Text

Buttons: Sizes

Make a button a different size using the button-xl/lg/sm/mn custom formats (Format > Formats > Custom Formats > button-xl/lg/sm/mn).

Extra Large Button Large Button Small Button Mini Button

Buttons: Standard Media

Applying a button style to a media link is achieved via media attributes. Double click the link in the TinyMCE editor to open the media attributes modal:

  • Name - change the default link text
  • Class - add in custom format options button-blue/red/grey and size if required button-xl/lg/sm/mn
  • Hide size and type - by default the file type and size if shown, add any value to this to hide it

Example where the Name has been set, button-blue custom format applied and value added to the Hide size and type element:

Screenshot showing example of applying button style to a media item

Button Text Button Text (PDF - 188KB) Political Advertising.pdf (PDF - 188KB)

Updated May 12, 2025