Buttons

Sizes

Button XL Button LG Button MD Button SM Button XS

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

Shapes

Default Border Radius Rounded

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

Font Styles

Default Font Style 2

<a class="button button-lg button-gray" href="#">Button</a>
<a class="button button-lg button-gray button-font-2" href="#">Button</a>

Button Style - Regular

Gray Dark Outline Gray Outline Dark

<a class="button button-lg button-gray" href="#">Gray</a>
<a class="button button-lg button-dark" href="#">Dark</a>
<a class="button button-lg button-outline-gray" href="#">Outline Gray</a>
<a class="button button-lg button-outline-dark" href="#">Outline Dark</a>

White Outline white Outline white 2

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

Button Style - Fancy 1

Gray Dark Outline Gray

<a class="button button-lg button-fancy-1-gray" href="#">Gray</a>
<a class="button button-lg button-fancy-1-dark" href="#">Dark</a>
<a class="button button-lg button-fancy-1-outline-gray" href="#">Outline Gray</a>

White Outline White

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

Button Style - Fancy 2

Gray Dark Outline Gray Outline Dark

<a class="button button-lg button-fancy-2-gray" href="#">Gray</a>
<a class="button button-lg button-fancy-2-dark" href="#">Dark</a>
<a class="button button-lg button-fancy-2-outline-gray" href="#">Outline Gray</a>
<a class="button button-lg button-fancy-2-outline-dark" href="#">Outline Dark</a>

White Outline White

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

Button Style - Fancy 3

Fancy 3 Gray Outline Gray

<a class="button button-fancy-3-gray" href="#">Fancy 3 Gray</a>
<a class="button button-fancy-3-outline-gray" href="#">Outline Gray</a>

Fancy 3 White Outline White

<a class="button button-fancy-3-white" href="#">Fancy 3 White</a>
<a class="button button-fancy-3-outline-white" href="#">Outline White</a>

Button Style - Text

Text Button 1 Text Button 2 Text Button 3

<a class="button-text-1" href="#">Text Button 1</a>
<a class="button-text-2" href="#">Text Button 2</a>
<a class="button-text-3" href="#">Text Button 3</a>

Button Style - Circle Text


<a class="button-ct-gray button-ct-xl" href="#">
  <span class="button-ct-icon"><i class="fas fa-play"></i></span>
  <span class="button-ct-text">Circle Text XL</span>
</a>
<a class="button-ct-gray button-ct-lg" href="#">
  <span class="button-ct-icon"><i class="fas fa-play"></i></span>
  <span class="button-ct-text">Circle Text LG</span>
</a>
<a class="button-ct-gray" href="#">
  <span class="button-ct-icon"><i class="fas fa-play"></i></span>
  <span class="button-ct-text">Circle Text MD</span>
</a>
<a class="button-ct-gray button-ct-sm" href="#">
  <span class="button-ct-icon"><i class="fas fa-play"></i></span>
  <span class="button-ct-text">Circle Text SM</span>
</a>
<a class="button-ct-gray button-ct-xs" href="#">
  <span class="button-ct-icon"><i class="fas fa-play"></i></span>
  <span class="button-ct-text">Circle Text XS</span>
</a>


<a class="button-ct-gray" href="#">
  <span class="button-ct-icon"><i class="fas fa-play"></i></span>
  <span class="button-ct-text">Circle Text Gray</span>
</a>
<a class="button-ct-dark" href="#">
  <span class="button-ct-icon"><i class="fas fa-play"></i></span>
  <span class="button-ct-text">Circle Text Dark</span>
</a>
<a class="button-ct-outline-gray" href="#">
  <span class="button-ct-icon"><i class="fas fa-play"></i></span>
  <span class="button-ct-text">Circle Text Outline Gray</span>
</a>
<a class="button-ct-outline-dark" href="#">
  <span class="button-ct-icon"><i class="fas fa-play"></i></span>
  <span class="button-ct-text">Circle Text Outline Dark</span>
</a>

Circle Text White Circle Text Outline White 1 Circle Text Outline White 2

<a class="button-ct-white" href="#">
  <span class="button-ct-icon"><i class="fas fa-play"></i></span>
  <span class="button-ct-text">Circle Text White</span>
</a>
<a class="button-ct-outline-white" href="#">
  <span class="button-ct-icon"><i class="fas fa-play"></i></span>
  <span class="button-ct-text">Circle Text Outline White 1</span>
</a>
<a class="button-ct-outline-white-2" href="#">
  <span class="button-ct-icon"><i class="fas fa-play"></i></span>
  <span class="button-ct-text">Circle Text Outline White 2</span>
</a>

Button Style - Circle


<a class="button-circle button-circle-lg button-circle-gray" href="#">
  <i class="fas fa-heart"></i>
</a>
<a class="button-circle button-circle-lg button-circle-dark" href="#">
  <i class="fas fa-heart"></i>
</a>
<a class="button-circle button-circle-lg button-circle-outline-gray" href="#">
  <i class="fas fa-heart"></i>
</a>
<a class="button-circle button-circle-lg button-circle-outline-dark" href="#">
  <i class="fas fa-heart"></i>
</a>


<a class="button-circle button-circle-lg button-circle-white" href="#">
  <i class="fas fa-heart"></i>
</a>
<a class="button-circle button-circle-lg button-circle-outline-white" href="#">
  <i class="fas fa-heart"></i>
</a>
<a class="button-circle button-circle-lg button-circle-outline-white-2" href="#">
  <i class="fas fa-heart"></i>
</a>

Button Circle Animation


<a class="button-circle button-circle-lg button-circle-dark button-circle-animation-drop" href="#">
  <i class="fas fa-heart"></i>
</a>
<a class="button-circle button-circle-lg button-circle-gray button-circle-animation-drop-2" href="#">
  <i class="fas fa-heart"></i>
</a>

Button Hovers

Shadow Float Scale Shrink

<a class="button button-lg button-gray button-shadow" href="#">Shadow</a>
<a class="button button-lg button-gray button-hover-float" href="#">Float</a>
<a class="button button-lg button-gray button-hover-scale" href="#">Scale</a>
<a class="button button-lg button-gray button-hover-shrink" href="#">Shrink</a>

© 2020 FlaTheme, All Rights Reserved.