Buttons

Buttons make your links stand out. Use them in combination with different arrows to make your call to action prominent.

content

What do they look like?

The default button element is blue, but you can combine your buttons with background classes if you're adding a button to an element with a different background colour. Check out the backgrounds page for more uses.

A button

<a class="button" href="/">Button text</a>

A purple button

<a class="btn bg-purple" href="/">Button text</a>

A pale purple button

<a class="btn bg-pale-purple" href="/">Button text</a>

A yellow button

<a class="btn bg-yellow" href="/">Button text</a>

A orange button

<a class="btn bg-orange" href="/">Button text</a>

A red button

<a class="btn bg-red" href="/">Button text</a>

A green button

<a class="btn bg-green" href="/">Button text</a>

A black button

<a class="btn bg-black" href="/">Button text</a>

A grey button

<a class="btn bg-grey" href="/">Button text</a>

A white button

<a class="btn bg-white" href="/">Button text</a>

Add some icons

You can combine your button element with icons. A couple of examples are below, but check out the icons page for more.

Arrow right

<a class="btn arrow-right" href="/">Button text</a>

<a class="btn facebook" href="/">Button text</a>
Published: 21 Nov 2022 14:59 , Last updated: 17 Mar 2023 12:41
 

Site design by Elliot Parker.