We use 4 different kinds of buttons
<a class="button-action" href="#">Action Button</a> <a class="button-primary" href="#">Primary Button</a> <a class="button-general" href="#">General Button</a> <a class="button-understated" href="#">Understated Button</a> <form action="#"> <input type="submit" class="button-action" value="Action Button"> <input type="submit" class="button-primary" value="Primary Button"> <input type="submit" class="button-general" value="General Button"> <input type="submit" class="button-understated" value="Understated Button"> </form>
Action Button
Primary Button
General Button
Understated Button
To make the buttons smaller, we can just add the class "mini", like so
<a class="button-action mini" href="#">Action Button</a> <a class="button-primary mini" href="#">Primary Button</a> <a class="button-general mini" href="#">General Button</a> <a class="button-understated mini" href="#">Understated Button</a>
<a class="button-action mega" href="#">Action Button</a> <a class="button-primary mega" href="#">Primary Button</a> <a class="button-general mega" href="#">General Button</a> <a class="button-understated mega" href="#">Understated Button</a>