work with both a and button tags
<p>
<a class="CG2-button" href="#">button:a element</a>
</p>
<p>
<button class="CG2-button" href="#">button: button element</button>
</p>
with an icon
<p>
<a class="CG2-button" href="#"><span class="CG2-icon-pxg"></span>button</a>
</p>
use for Primary, Action, Setting
<p>
<a class="CG2-button CG2-button--primary" href="#">button</a>
</p>
<p>
<a class="CG2-button CG2-button--action" href="#">button</a>
</p>
<p>
<a class="CG2-button CG2-button--setting" href="#">button</a>
</p>
sizes
<p>
<a class="CG2-button CG2-button--thin" href="#">button</a>
</p>
<p>
<a class="CG2-button CG2-button--large" href="#">button</a>
</p>
<p>
<a class="CG2-button CG2-button--fullWidth" href="#">button</a>
</p>
disabled
<p>
<a class="CG2-button CG2-button--disabled" href="#">button</a>
</p>
<p>
<a class="CG2-button CG2-button--primary CG2-button--disabled" href="#">primary button</a>
</p>
<p>
<a class="CG2-button CG2-button--action CG2-button--disabled" href="#">action button</a>
</p>
<p>
<a class="CG2-button CG2-button--setting CG2-button--disabled" href="#">setting button</a>
</p>
progress
<p>
<a class="CG2-button CG2-button--progress" href="#">button</a>
</p>