Modulistica

Buttons: 1-4

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>

Buttons: Color

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>

Buttons: Color Compounded with Buttons 2-4

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>

Buttons: Square

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>

Buttons: Icons

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>

Buttons: Icons Only

 

<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>

Buttons: Sizes

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>

Buttons: Block

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>