A photograph of a person typing at a laptop

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?

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>

A pale pink button

<a class="button bg-pale-pink" href="/">Button text</a>

A dark pink button

<a class="button bg-dark-pink" href="/">Button text</a>

A purple button

<a class="button bg-purple" 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 blue button

<a class="button bg-blue" href="/">Button text</a>

A purple button

<a class="button bg-purple" 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="button arrow-right" href="/">Button text</a>

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

Related articles

Image galleries

Make lots of photos look good instead of cluttered.

Sun 09 Apr 2023

Quotes

For chunky testimonials that make an impact.

Sun 09 Apr 2023

Videos

Embed videos on your website while making sure they look great on mobile and desktop.

Sun 09 Apr 2023