Logo Mark
Elements
Interface

Buttons

Basic (no class)

Basic (no size class) 

<a href="#" class="btn ">Add a show</a>

btn-small 

<a href="#" class="btn btn-small">Add a show</a>

btn-tiny 

<a href="#" class="btn btn-tiny">Add a show</a>

btn-disabled

Basic (no size class) 

<a href="#" class="btn btn-disabled ">Add a show</a>

btn-small 

<a href="#" class="btn btn-disabled btn-small">Add a show</a>

btn-tiny 

<a href="#" class="btn btn-disabled btn-tiny">Add a show</a>

btn-primary

Basic (no size class) 

<a href="#" class="btn btn-primary ">Add a show</a>

btn-small 

<a href="#" class="btn btn-primary btn-small">Add a show</a>

btn-tiny 

<a href="#" class="btn btn-primary btn-tiny">Add a show</a>

btn-secondary

Basic (no size class) 

<a href="#" class="btn btn-secondary ">Add a show</a>

btn-small 

<a href="#" class="btn btn-secondary btn-small">Add a show</a>

btn-tiny 

<a href="#" class="btn btn-secondary btn-tiny">Add a show</a>

btn-delete

Basic (no size class) 

<a href="#" class="btn btn-delete ">Add a show</a>

btn-small 

<a href="#" class="btn btn-delete btn-small">Add a show</a>

btn-tiny 

<a href="#" class="btn btn-delete btn-tiny">Add a show</a>

btn-add

Basic (no size class) 

<a href="#" class="btn btn-add ">Add a show</a>

btn-small 

<a href="#" class="btn btn-add btn-small">Add a show</a>

btn-tiny 

<a href="#" class="btn btn-add btn-tiny">Add a show</a>

btn-secondary-add

Basic (no size class) 

<a href="#" class="btn btn-secondary-add ">Add a show</a>

btn-small 

<a href="#" class="btn btn-secondary-add btn-small">Add a show</a>

btn-tiny 

<a href="#" class="btn btn-secondary-add btn-tiny">Add a show</a>

btn-full-width

Basic (no size class) 

<a href="#" class="btn btn-secondary  btn-full-width">Add a show</a>

btn-small 

<a href="#" class="btn btn-secondary btn-small btn-full-width">Add a show</a>

btn-tiny 

<a href="#" class="btn btn-secondary btn-tiny btn-full-width">Add a show</a>