View events
View opportunities
Representation
Making Change
Support
About
Find support
Bag merch
Buttons make your links stand out. Use them in combination with different arrows to make your call to action prominent.
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 pink button
<a class="button bg-pink" href="/">Button text</a>
An orange button
<a class="button bg-orange" href="/">Button text</a>
A yellow button
<a class="button bg-yellow" href="/">Button text</a>
A green button
<a class="button bg-green" href="/">Button text</a>
A black button
<a class="button bg-black" href="/">Button text</a>
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="button arrow-right" href="/">Button text</a>
Facebook
<a class="button facebook" href="/">Button text</a>