Arty - Buttons

Sizes


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

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 White 2 Outline white Outline white 2


<a class="button button-lg button-white" href="#">White</a>
<a class="button button-lg button-white-2" href="#">White 2</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

Fancy Gray Outline Gray


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

Fancy White Outline White


<a class="button button-fancy-white" href="#">Fancy White</a>
<a class="button button-fancy-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

Circle Text XL

Circle Text LG

Circle Text MD

Circle Text SM


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

Circle Text Gray Circle Text Dark Circle Text Outline Gray Circle Text Outline Dark


<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-white-2" 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>