Buttons


Button Shapes

Default Radius Rounded

<a class="button button-lg button-grey" href="#">Button</a>
<a class="button button-lg button-grey button-radius" href="#">Button</a>
<a class="button button-lg button-grey button-rounded" href="#">Button</a>

Button Font Styles

Default Font 2

<a class="button button-grey button-lg" href="#">Default</a>
<a class="button button-grey button-lg button-font-2" href="#">Font 2</a>

Grey

Button Button Button Button Button

<a class="button button-xl button-grey" href="#">Button</a>
<a class="button button-lg button-grey" href="#">Button</a>
<a class="button button-md button-grey" href="#">Button</a>
<a class="button button-sm button-grey" href="#">Button</a>
<a class="button button-xs button-grey" href="#">Button</a>

Dark / Outline Grey / Outline Dark

Dark Outline Grey 1 Outline Grey 2 Outline Dark 1 Outline Dark 2

<a class="button button-lg button-dark" href="#">Dark</a>
<a class="button button-lg button-outline-grey" href="#">Outline Grey 1</a>
<a class="button button-lg button-outline-grey-2" href="#">Outline Grey 2</a>
<a class="button button-lg button-outline-dark" href="#">Outline Dark 1</a>
<a class="button button-lg button-outline-dark-2" href="#">Outline Dark 2</a>

White

White 1 White 2 White 3 Outline White 1 Outline White 2

<a class="button button-lg button-white" href="#">White 1</a>
<a class="button button-lg button-white-2" href="#">White 2</a>
<a class="button button-lg button-white-3" href="#">White 3</a>
<a class="button button-lg button-outline-white" href="#">Outline White 1</a>
<a class="button button-lg button-outline-white-2" href="#">Outline White 2</a>

Fill - Outline Dark

Left Top Right Bottom

<a class="button button-lg button-fill-left-outline" href="#">Left</a>
<a class="button button-lg button-fill-top-outline" href="#">Top</a>
<a class="button button-lg button-fill-right-outline" href="#">Right</a>
<a class="button button-lg button-fill-bottom-outline" href="#">Bottom</a>

Fill - Outline White

Left Top Right Bottom

<a class="button button-lg button-fill-left-outline-white" href="#">Left</a>
<a class="button button-lg button-fill-top-outline-white" href="#">Top</a>
<a class="button button-lg button-fill-right-outline-white" href="#">Right</a>
<a class="button button-lg button-fill-bottom-outline-white" href="#">Bottom</a>

Reveal Icon - Grey / Dark

Reveal Left Reveal Right Reveal Left Reveal Right

<a class="button button-lg button-reveal-left-grey" href="#">
  <i class="ti-arrow-right"></i><span>Reveal Left</span>
</a>
<a class="button button-lg button-reveal-right-grey" href="#">
  <i class="ti-arrow-right"></i><span>Reveal Right</span>
</a>
<a class="button button-lg button-reveal-left-dark" href="#">
  <i class="ti-arrow-right"></i><span>Reveal Left</span>
</a>
<a class="button button-lg button-reveal-right-dark" href="#">
  <i class="ti-arrow-right"></i><span>Reveal Right</span>
</a>

Reveal Icon - Outline Grey / Dark

Reveal Left Reveal Right Reveal Left Reveal Right

<a class="button button-lg button-reveal-left-outline-grey" href="#">
  <i class="ti-arrow-right"></i><span>Reveal Left</span>
</a>
<a class="button button-lg button-reveal-right-outline-grey" href="#">
  <i class="ti-arrow-right"></i><span>Reveal Right</span>
</a>
<a class="button button-lg button-reveal-left-outline-dark" href="#">
  <i class="ti-arrow-right"></i><span>Reveal Left</span>
</a>
<a class="button button-lg button-reveal-right-outline-dark" href="#">
  <i class="ti-arrow-right"></i><span>Reveal Right</span>
</a>

Reveal Icon - White

Reveal Left Reveal Right Reveal Left Reveal Right

<a class="button button-lg button-reveal-left-white" href="#">
  <i class="ti-arrow-right"></i><span>Reveal Left</span>
</a>
<a class="button button-lg button-reveal-right-white" href="#">
  <i class="ti-arrow-right"></i><span>Reveal Right</span>
</a>
<a class="button button-lg button-reveal-left-outline-white" href="#">
  <i class="ti-arrow-right"></i><span>Reveal Left</span>
</a>
<a class="button button-lg button-reveal-right-outline-white" href="#">
  <i class="ti-arrow-right"></i><span>Reveal Right</span>
</a>