Default Button Button 2 Button 3 Button 4
<a href="#" class="button">Default Button</a> <a href="#" class="button button-2">Button 2</a> <a href="#" class="button button-3">Button 3</a> <a href="#" class="button button-4">Button 4</a>
Button Grey Button Pink Button Red Button Purple Button Orange Button Blue
<a href="#" class="button button-grey">Button Grey</a> <a href="#" class="button button-pink">Button Pink</a> <a href="#" class="button button-red">Button Red</a> <a href="#" class="button button-purple">Button Purple</a> <a href="#" class="button button-orange">Button Orange</a> <a href="#" class="button button-blue">Button Blue</a>
Button Grey Button Pink Button Red Button Purple Button Orange Button Blue
<a href="#" class="button button-2 button-grey">Button Grey</a> <a href="#" class="button button-3 button-pink">Button Pink</a> <a href="#" class="button button-4 button-red">Button Red</a> <a href="#" class="button button-2 button-purple">Button Purple</a> <a href="#" class="button button-3 button-orange">Button Orange</a> <a href="#" class="button button-4 button-blue">Button Blue</a>
Default Button Button 3 Button Grey Button Pink Button Red Button Purple Button Orange Button Blue
<a href="#" class="button button-square">Default Button</a> <a href="#" class="button button-square button-3">Button 3</a> <a href="#" class="button button-square button-2 button-grey">Button Grey</a> <a href="#" class="button button-square button-3 button-pink">Button Pink</a>
Default Button Button 2 Button 3 Button 4 Button Grey Button Pink Button Red Button Purple Button Orange Button Blue
<a href="#" class="button"><i class="fa fa-fw fa-download"></i> Default Button</a> <a href="#" class="button button-2"><i class="fa fa-fw fa-cloud"></i> Button 2</a> <a href="#" class="button button-3"><i class="fa fa-fw fa-star"></i> Button 3</a> <a href="#" class="button button-4"><i class="fa fa-fw fa-car"></i> Button 4</a> <a href="#" class="button button-grey"><i class="fa fa-fw fa-tag"></i> Button Grey</a> <a href="#" class="button button-pink"><i class="fa fa-fw fa-university"></i> Button Pink</a> <a href="#" class="button button-red"><i class="fa fa-fw fa-edit"></i> Button Red</a> <a href="#" class="button button-purple"><i class="fa fa-fw fa-lock"></i> Button Purple</a> <a href="#" class="button button-orange"><i class="fa fa-fw fa-clock-o"></i> Button Orange</a> <a href="#" class="button button-blue"><i class="fa fa-fw fa-arrows"></i> Button Blue</a>
<a href="#" class="button"><i class="fa fa-fw fa-download"></i></a> <a href="#" class="button button-2"><i class="fa fa-fw fa-cloud"></i></a> <a href="#" class="button button-3"><i class="fa fa-fw fa-star"></i></a> <a href="#" class="button button-4"><i class="fa fa-fw fa-car"></i></a> <a href="#" class="button button-grey"><i class="fa fa-fw fa-tag"></i></a> <a href="#" class="button button-pink"><i class="fa fa-fw fa-university"></i></a> <a href="#" class="button button-red"><i class="fa fa-fw fa-edit"></i></a> <a href="#" class="button button-purple"><i class="fa fa-fw fa-lock"></i></a> <a href="#" class="button button-orange"><i class="fa fa-fw fa-clock-o"></i></a> <a href="#" class="button button-blue"><i class="fa fa-fw fa-arrows"></i></a>
Button XLarge Button Large Button Medium Button Small Button XSmall
<a href="#" class="button button-xlarge button-grey">Button XLarge</a> <a href="#" class="button button-large button-pink">Button Large</a> <a href="#" class="button button-medium button-red">Button Medium</a> <a href="#" class="button button-small button-purple">Button Small</a> <a href="#" class="button button-xsmall button-orange">Button XSmall</a>
Default Button Button 2 Button 3 Button 4 Button Grey
<a href="#" class="button button-block">Default Button</a> <a href="#" class="button button-block button-2">Button 2</a> <a href="#" class="button button-block button-3">Button 3</a> <a href="#" class="button button-block button-4">Button 4</a> <a href="#" class="button button-block button-grey">Button Grey</a>