How to add buttons (T4 legacy templates only)

These guides are specific to content in T4's legacy templates only. If your content uses T4's responsive templates, please see our user guides for web publishers in SharePoint.

Last updated: 22/10/2014

Before you start

Buttons should be kept to a minimum, don't use them as a substitute for a link, only use them for a call to action eg 'download a prospectus', 'search for a course'.

Default buttons

To make a button, add class="btn" to a link, this will create a red button. Only use a red button once on a page for the most important action. If using multiple buttons then consider using a class of btn-weak to make them stone coloured.

Button Weak button

Different sizes of button

Full width button Large button Large weak button Small button Small weak button

Coloured buttons

Coloured buttons can be used to complement site colour schemes.

Bright colours

Bright aqua button Bright blue button Bright purple button Bright pink button Bright red button Bright yellow button Bright lime button Bright green button

Dark colours

Dark aqua button Dark blue button Dark purple button Dark pink button Dark red button Dark yellow button Dark lime button Dark green button

Buttons with icons

Icons can be added to buttons

Search button Button with an arrow for extra emphasis Download button Auto padlock icon on https://bris... A home button

Buttons within module boxes

If a button is within a coloured module box there is no need to apply a colour, it will automatically pick up the 'partner' colour.

Heading

Button Button Button Button

Heading

Button Button Button Button

Buttons within tinted modules

If a button (or submit input) is within a tinted module box then there is no need to apply a colour, it will automatically pick it up.

Heading

Button Button Button Button

Heading

Button Button Button Button