Button styles can be applied to any element. Typically you'll want to use either a <button> or an <a> element:
<button class="button">Push me</button>
<a href="#" class="button">Link to somewhere</a>
There are 3 standard levels - primary, secondary and tertiary:
<a href="#" class="button button--primary">Link to somewhere</a>
<a href="#" class="button button--secondary">Link to somewhere</a>
<a href="#" class="button button--tertiary">Link to somewhere</a>
Also available in the associated tones:
<a href="#" class="button button--tone-media">Link to somewhere</a>
<a href="#" class="button button--tone-news">Link to somewhere</a>
<a href="#" class="button button--tone-feature">Link to somewhere</a>
<a href="#" class="button button--tone-comment">Link to somewhere</a>
<a href="#" class="button button--tone-live">Link to somewhere</a>
And a variant of that tone:
<a href="#" class="button button--tone-media-variant">Link to somewhere</a>
<a href="#" class="button button--tone-news-variant">Link to somewhere</a>
<a href="#" class="button button--tone-feature-variant">Link to somewhere</a>
<a href="#" class="button button--tone-comment-variant">Link to somewhere</a>
<a href="#" class="button button--tone-live-variant">Link to somewhere</a>
They come in different sizes:
<a href="#" class="button button--xlarge">Link to somewhere</a>
<a href="#" class="button button--large">Link to somewhere</a>
<a href="#" class="button button--medium">Link to somewhere</a>
<a href="#" class="button button--small">Link to somewhere</a>
<a href="#" class="button button--xsmall">Link to somewhere</a>
Show more button:
<button class="button button--medium button--show-more button--tertiary">
<i class="i i-plus-neutral1"></i>View more stories
</button>