Demo: http://demo.codefusionlab.com/css3-github-buttons/ext_button_size/
These are all incremented by px sizes
<a href="#button" class="button bigger">bigger</a> <a href="#button" class="button biggest">biggest</a> <a href="#button" class="button xl">xl</a> <a href="#button" class="button xxl">xxl</a> <a href="#button" class="button xxxl">xxxl</a> <a href="#button" class="button xxxxl">xxxxl</a> <a href="#button" class="button xxxxxl">xxxxxl</a>
These are all incremented by em sizes
<a href="#button" class="button x1">x1</a> <a href="#button" class="button x2">x2</a> <a href="#button" class="button x3">x3</a> <a href="#button" class="button x4">x4</a> <a href="#button" class="button x5">x5</a> <a href="#button" class="button x6">x6</a> <a href="#button" class="button x7">x7</a> <a href="#button" class="button x8">x8</a> <a href="#button" class="button x9">x9</a> <a href="#button" class="button x10">x10</a>
These are all fixed min-widths by px
<a href="#button" class="button minwidth50">minwidth50</a> <a href="#button" class="button minwidth100">minwidth100</a> <a href="#button" class="button minwidth150">minwidth150</a> <a href="#button" class="button minwidth200">minwidth200</a> <a href="#button" class="button minwidth250">minwidth250</a> <a href="#button" class="button minwidth300">minwidth300</a> <a href="#button" class="button minwidth350">minwidth350</a> <a href="#button" class="button minwidth400">minwidth400</a> <a href="#button" class="button minwidth450">minwidth450</a> <a href="#button" class="button minwidth500">minwidth500</a> <a href="#button" class="button minwidth550">minwidth550</a> <a href="#button" class="button minwidth600">minwidth600</a> <a href="#button" class="button minwidth650">minwidth650</a> <a href="#button" class="button minwidth700">minwidth700</a> <a href="#button" class="button minwidth750">minwidth750</a> <a href="#button" class="button minwidth800">minwidth800</a> <a href="#button" class="button minwidth850">minwidth850</a> <a href="#button" class="button minwidth900">minwidth900</a> <a href="#button" class="button minwidth950">minwidth950</a>
These are all fluid min-widths by %
<a href="#button" class="button minpcent25">minpcent25</a> <a href="#button" class="button minpcent50">minpcent50</a> <a href="#button" class="button minpcent75">minpcent75</a> <a href="#button" class="button minpcent100">minpcent100</a>
These are all fixed max-widths by px
<a href="#button" class="button maxwidth50">maxwidth50</a> <a href="#button" class="button maxwidth100">maxwidth100</a> <a href="#button" class="button maxwidth150">maxwidth150</a> <a href="#button" class="button maxwidth200">maxwidth200</a> <a href="#button" class="button maxwidth250">maxwidth250</a> <a href="#button" class="button maxwidth300">maxwidth300</a> <a href="#button" class="button maxwidth350">maxwidth350</a> <a href="#button" class="button maxwidth400">maxwidth400</a> <a href="#button" class="button maxwidth450">maxwidth450</a> <a href="#button" class="button maxwidth500">maxwidth500</a> <a href="#button" class="button maxwidth550">maxwidth550</a> <a href="#button" class="button maxwidth600">maxwidth600</a> <a href="#button" class="button maxwidth650">maxwidth650</a> <a href="#button" class="button maxwidth700">maxwidth700</a> <a href="#button" class="button maxwidth750">maxwidth750</a> <a href="#button" class="button maxwidth800">maxwidth800</a> <a href="#button" class="button maxwidth850">maxwidth850</a> <a href="#button" class="button maxwidth900">maxwidth900</a> <a href="#button" class="button maxwidth950">maxwidth950</a>
These are all fluid max-widths by %
<a href="#button" class="button maxpcent25">maxpcent25</a> <a href="#button" class="button maxpcent50">maxpcent50</a> <a href="#button" class="button maxpcent75">maxpcent75</a> <a href="#button" class="button maxpcent100">maxpcent100</a>
use this if want your text to wrap
<a href="#button" class="button maxwrap">maxwrap</a>