Use <a> for navigation, <button> for everything else. Submit/reset buttons are the only exceptions, using <input[type="submit"]> to trigger default browser behaviour associated with submitting form input. Buttons should follow a typographic scale, based on importance and base font-size.
A full-color, primary button. Works on button, link and submit elements. Supports icons. Use it sparingly.
<button class="a-button ">primary button</button>
<a class="a-button a-button--icon-after icon-arrow-right" href="http://smartphoto.be">Link with icon</a>
<a class="a-button a-button--only-icon icon-arrow-right" href="#"></a>
A full-color, secondary button. Works on button, link and submit elements. Supports icons. Use it sparingly.
<button class="a-button a-button--secondary">secondary button</button>
<a class="a-button a-button--secondary a-button--icon-after icon-arrow-right" href="http://smartphoto.be">Link with icon</a>
<a class="a-button a-button--only-icon a-button--secondary icon-arrow-right" href="#"></a>
A full-color, tertiairy button. Works on button, link and submit elements. Supports icons. Use it sparingly.
<button class="a-button a-button--tertiairy">primary button</button>
<a class="a-button a-button--tertiairy icon-arrow-right" href="">Link with icon</a>
<a class="a-button a-button--only-icon a-button--tertiairy icon-arrow-right" href="#"></a>
this is usage documentation is written in markdown