Toggle navigation

Basics

Buttons

The default button should be used for basic call to actions within the website.

Read the official Boostrap documentation for buttons.

Default buttons

We style some links, especially CTA links to look like buttons.

Use the button classes on an <a>, <button>, or <input> element.

<ul class="list-inline">
    <li><a class="btn btn-blue" href="#">Finance »</a></li>
    <li><a class="btn btn-green" href="#">Study support »</a></li>
    <li><a class="btn btn-pink" href="#">Where can I study? »</a></li>
    <li><a class="btn btn-purple" href="#">Postgraduate »</a></li>
    <li><a class="btn btn-red" href="#">Study support »</a></li>
    <li><a class="btn btn-charcoal" href="#">Finance »</a></li>
    <li><a class="btn btn-default" href="#">September 2017 »</a></li>
</ul>

Button text should be short and descriptive.

Buttons can be created using the btn class combined with a colour class such as btn-blue.

The link hover colour is charcoal except when using the colour class btn-charcoal which has a light grey hover.

Button colour classes available:

  • btn-blue
  • btn-charcoal
  • btn-default
  • btn-green
  • btn-purple

Other button classes available

The use of following text box classes should only be used with caution.

  • btn-pink
  • btn-red

The use of following button classes has now been deprecated.

  • btn-lime
  • btn-yellow
  • btn-gold
  • btn-aqua

Screen reader users tab from link to link, skipping text in between.

Link text should make sense out of content, phrases such as 'click here' or 'more' should not be used.

Buttons should display a visible focus state when users tab to them.

When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.

For users with visual impairments, the use of button classes btn-lime, btn-yellow, btn-gold and btn-aqua has now been deprecated. These colours should not be used for normal or large sized text buttons.

The use of button classes btn-pink and btn-red should only be used with caution.

Colours tested with WebAIM Color Contrast Checker.

Top of page

Button sizes

Add btn-lg, btn-sm, or btn-xs for additional sizes.

<p><a class="btn btn-charcoal btn-lg" href="#">Large button</a> <a class="btn btn-default btn-lg" href="#">Large button</a></p>
<p><a class="btn btn-charcoal" href="#">Default button</a> <a class="btn btn-default" href="#">Default button</a></p>

Button text should be short and descriptive.

Buttons can be created using the btn class combined with a colour class such as btn-blue.

The link hover colour is charcoal except when using the colour class btn-charcoal which has a light grey hover.

Button colour classes available:

  • btn-blue
  • btn-charcoal
  • btn-default
  • btn-green
  • btn-purple

Other button classes available

The use of following text box classes should only be used with caution.

  • btn-pink
  • btn-red

The use of following button classes has now been deprecated.

  • btn-lime
  • btn-yellow
  • btn-gold
  • btn-aqua

Screen reader users tab from link to link, skipping text in between.

Link text should make sense out of content, phrases such as 'click here' or 'more' should not be used.

Buttons should display a visible focus state when users tab to them.

When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.

For users with visual impairments, the use of button classes btn-lime, btn-yellow, btn-gold and btn-aqua has now been deprecated. These colours should not be used for normal or large sized text buttons.

The use of button classes btn-pink and btn-red should only be used with caution.

Colours tested with WebAIM Color Contrast Checker.

Top of page

Block buttons

Create block level buttons—those that span the full width of a parent— by adding btn-block.

<p><a class="btn btn-red btn-lg btn-block" href="#">Block level button</a> <a class="btn btn-charcoal btn-lg btn-block" href="#">Block level button</a></p>

Button text should be short and descriptive.

Buttons can be created using the btn class combined with a colour class such as btn-blue.

The link hover colour is charcoal except when using the colour class btn-charcoal which has a light grey hover.

Button colour classes available:

  • btn-blue
  • btn-charcoal
  • btn-default
  • btn-green
  • btn-purple

Other button classes available

The use of following text box classes should only be used with caution.

  • btn-pink
  • btn-red

The use of following button classes has now been deprecated.

  • btn-lime
  • btn-yellow
  • btn-gold
  • btn-aqua

Screen reader users tab from link to link, skipping text in between.

Link text should make sense out of content, phrases such as 'click here' or 'more' should not be used.

Buttons should display a visible focus state when users tab to them.

When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.

For users with visual impairments, the use of button classes btn-lime, btn-yellow, btn-gold and btn-aqua has now been deprecated. These colours should not be used for normal or large sized text buttons.

The use of button classes btn-pink and btn-red should only be used with caution.

Colours tested with WebAIM Color Contrast Checker.

Top of page

Button with icon

<p><a class="btn btn-purple btn-lg" href="#">Semester planner <span class="fa fa-download" aria-label="Download"></span></a></p>

Button text should be short and descriptive.

Buttons can be created using the btn class combined with a colour class such as btn-blue.

The link hover colour is charcoal except when using the colour class btn-charcoal which has a light grey hover.

Button colour classes available:

  • btn-blue
  • btn-charcoal
  • btn-default
  • btn-green
  • btn-purple

Other button classes available

The use of following text box classes should only be used with caution.

  • btn-pink
  • btn-red

The use of following button classes has now been deprecated.

  • btn-lime
  • btn-yellow
  • btn-gold
  • btn-aqua

Screen reader users tab from link to link, skipping text in between.

Link text should make sense out of content, phrases such as 'click here' or 'more' should not be used.

Buttons should display a visible focus state when users tab to them.

When styling links to look like buttons, remember that screen readers handle links slightly differently than they do buttons. Pressing the Space key triggers a button, but pressing the Enter key triggers a link.

For users with visual impairments, the use of button classes btn-lime, btn-yellow, btn-gold and btn-aqua has now been deprecated. These colours should not be used for normal or large sized text buttons.

The use of button classes btn-pink and btn-red should only be used with caution.

Colours tested with WebAIM Color Contrast Checker.

Top of page

Changelog

Added Updates Current version Accessibility Status
10 Aug 2016 25 Apr 2017 - Updated accessibility information 1.1.0 Accessible Current

Top of page