New web

Web pattern library, style and technical reference

Content

Buttons

Default button

Small Button Default Button Large Button

<a href="#" class="button small-button">Small Button</a>
<a href="#" class="button">Default Button</a>
<a href="#" class="button large-button">Large Button</a>

Solid button

Small Button Default Button Large Button

<a href="#" class="button solid-button small-button">Small Button</a>
<a href="#" class="button solid-button">Default Button</a>
<a href="#" class="button solid-button large-button">Large Button</a>

Inverted button

Small Button Default Button Large Button

<a href="#" class="button inverted-button small-button">Small Button</a>
<a href="#" class="button inverted-button">Default Button</a>
<a href="#" class="button inverted-button large-button">Large Button</a>

Inverted solid button

Small Button Default Button Large Button

<a href="#" class="button inverted-button solid-button small-button">Small Button</a>
<a href="#" class="button inverted-button solid-button">Default Button</a>
<a href="#" class="button inverted-button solid-button large-button">Large Button</a>

Next button

The 'next-button' style can also be used inconjuction with the 'solid-button' and/or 'inverted-button' styles above.

Small Button Default Button Large Button

<a href="#" class="button next-button small-button">Small Button</a>
<a href="#" class="button next-button">Default Button</a>
<a href="#" class="button next-button large-button">Large Button</a>

Previous button

The 'previous-button' style can also be used inconjuction with the 'solid-button' and/or 'inverted-button' styles above.

Small Button Default Button Large Button

<a href="#" class="button previous-button small-button">Small Button</a>
<a href="#" class="button previous-button">Default Button</a>
<a href="#" class="button previous-button large-button">Large Button</a>

Button with icon

The button with icon be used inconjuction with the 'solid-button' and/or 'inverted-button' styles above. Compatible with both Font Awesome and Icons8.

Small Button Default Button Large Button

<a href="#" class="button small-button"><span class="fa fa-globe"></span>Small Button</a>
<a href="#" class="button"><span class="fa fa-globe"></span>Default Button</a>
<a href="#" class="button large-button"><span class="fa fa-globe"></span>Large Button</a>