Buttons

Button Shapes

Default Radius Rounded 

<a class="button button-gray button-md" href="#">Default</a>
<a class="button button-gray button-md button-radius" href="#">Radius</a>
<a class="button button-gray button-md button-rounded" href="#">Rounded</a>

Button Sizes

X Large Large Medium Small 

<a class="button button-xl button-radius button-gray" href="#">X Large</a>
<a class="button button-lg button-radius button-gray" href="#">Large</a>
<a class="button button-md button-radius button-gray" href="#">Medium</a>
<a class="button button-sm button-radius button-gray" href="#">Small</a>

Button Font Styles

Default Font 2 

<a class="button button-md button-radius button-gray" href="#">Default</a>
<a class="button button-md button-radius button-gray button-font-2" href="#">Font 2</a>

Button Border Width (1px by default)

Border 1px Border 2px 

<a class="button button-md button-outline-gray" href="#">Border 1px</a>
<a class="button button-md button-outline-gray button-border-2" href="#">Border 2px</a>

Basic Styles

gray Dark Outline gray Outline Dark 

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

Colorful Styles

Aqua Blue Golden Yellow Pink Edge Purple Spring Red Tan Turquiose Very Peri 

<a class="button button-md button-radius button-aqua" href="#">Aqua</a>
<a class="button button-md button-radius button-blue" href="#">Blue</a>
<a class="button button-md button-radius button-golden-yellow" href="#">Golden Yellow</a>
<a class="button button-md button-radius button-pink-edge" href="#">Pink Edge</a>
<a class="button button-md button-radius button-purple" href="#">Purple</a>
<a class="button button-md button-radius button-spring-red" href="#">Spring Red</a>
<a class="button button-md button-radius button-tan" href="#">Tan</a>
<a class="button button-md button-radius button-turquiose" href="#">Turquiose</a>
<a class="button button-md button-radius button-very-peri" href="#">Very Peri</a>

Colorful Outline Styles

Aqua Blue Golden Yellow Pink Edge Purple Spring Red Tan Turquiose Very Peri 

<a class="button button-md button-radius button-border-2 button-outline-aqua" href="#">Aqua</a>
<a class="button button-md button-radius button-border-2 button-outline-blue" href="#">Blue</a>
<a class="button button-md button-radius button-border-2 button-outline-golden-yellow" href="#">Golden Yellow</a>
<a class="button button-md button-radius button-border-2 button-outline-pink-edge" href="#">Pink Edge</a>
<a class="button button-md button-radius button-border-2 button-outline-purple" href="#">Purple</a>
<a class="button button-md button-radius button-border-2 button-outline-spring-red" href="#">Spring Red</a>
<a class="button button-md button-radius button-border-2 button-outline-tan" href="#">Tan</a>
<a class="button button-md button-radius button-border-2 button-outline-turquiose" href="#">Turquiose</a>
<a class="button button-md button-radius button-border-2 button-outline-very-peri" href="#">Very Peri</a>

Backdrop Styles

Dark Aqua Blue Golden Yellow Pink Edge Purple Spring Red Tan Turquiose Very Peri 

<a class="button button-md button-backdrop-dark" href="#">Dark</a>
<a class="button button-md button-backdrop-color-aqua" href="#">Aqua</a>
<a class="button button-md button-backdrop-color-blue" href="#">Blue</a>
<a class="button button-md button-backdrop-color-golden-yellow" href="#">Golden Yellow</a>
<a class="button button-md button-backdrop-color-pink-edge" href="#">Pink Edge</a>
<a class="button button-md button-backdrop-color-purple" href="#">Purple</a>
<a class="button button-md button-backdrop-color-spring-red" href="#">Spring Red</a>
<a class="button button-md button-backdrop-color-tan" href="#">Tan</a>
<a class="button button-md button-backdrop-color-turquiose" href="#">Turquiose</a>
<a class="button button-md button-backdrop-color-very-peri" href="#">Very Peri</a>

Gradient Styles

Gradient 1 Gradient 2 Gradient 3 Gradient 4 Gradient 5 Gradient 6 Gradient 7 

<a class="button button-md button-radius button-gradient-1" href="#">Gradient 1</a>
<a class="button button-md button-radius button-gradient-2" href="#">Gradient 2</a>
<a class="button button-md button-radius button-gradient-3" href="#">Gradient 3</a>
<a class="button button-md button-radius button-gradient-4" href="#">Gradient 4</a>
<a class="button button-md button-radius button-gradient-5" href="#">Gradient 5</a>
<a class="button button-md button-radius button-gradient-6" href="#">Gradient 6</a>
<a class="button button-md button-radius button-gradient-7" href="#">Gradient 7</a>

Social Styles

Instagram Linkedin Youtube Pinterest Skype Dribbble Snapchat Whatsapp 

<a class="button button-md button-radius button-social-facebook" href="#">Facebook</a>
<a class="button button-md button-radius button-social-twitter" href="#">Twitter</a>
<a class="button button-md button-radius button-social-instagram" href="#">Instagram</a>
<a class="button button-md button-radius button-social-linkedin" href="#">Linkedin</a>
<a class="button button-md button-radius button-social-youtube" href="#">Youtube</a>
<a class="button button-md button-radius button-social-pinterest" href="#">Pinterest</a>
<a class="button button-md button-radius button-social-skype" href="#">Skype</a>
<a class="button button-md button-radius button-social-dribbble" href="#">Dribbble</a>
<a class="button button-md button-radius button-social-snapchat" href="#">Snapchat</a>
<a class="button button-md button-radius button-social-whatsapp" href="#">Whatsapp</a>

Basic - White

White 1 White 2 Outline White 1 Outline White 2 

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

Reveal Icon

Dark Left Dark Right Outline Left Outline Right 

<a class="button button-md button-reveal-left-dark me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Dark Left</span></a>
<a class="button button-md button-reveal-right-dark mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Dark Right</span></a>
<a class="button button-md button-reveal-left-outline-dark me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Outline Left</span></a>
<a class="button button-md button-reveal-right-outline-dark mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Outline Right</span></a>

Reveal Icon - White

Reveal Left Reveal Right Reveal Left Reveal Right 

<a class="button button-md button-reveal-left-white me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Reveal Left</span></a>
<a class="button button-md button-reveal-right-white me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Reveal Right</span></a>
<a class="button button-md button-reveal-left-outline-white me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Reveal Left</span></a>
<a class="button button-md button-reveal-right-outline-white mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Reveal Right</span></a>

Button Hovers

Hover Float Hover Scale Hover Shrink 

<a class="button button-md button-radius button-gray button-hover-float" href="#">Hover Float</a>
<a class="button button-md button-radius button-gray button-hover-scale" href="#">Hover Scale</a>
<a class="button button-md button-radius button-gray button-hover-shrink" href="#">Hover Shrink</a>

Button Shadow

Shadow 

<a class="button button-lg button-radius button-white button-shadow" href="#">Shadow</a>

Text Buttons

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>

Circle Button - Sizes


<a class="button-circle button-circle-xl button-circle-gray" href="#">
  <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-lg button-circle-gray" href="#">
  <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-gray" href="#">
  <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-sm button-circle-gray" href="#">
  <i class="bi bi-heart-fill"></i>
</a>

Circle Button - Basic Styles


<a class="button-circle button-circle-md button-circle-gray" href="#">
  <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-dark" href="#">
  <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-gray" href="#">
  <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-dark" href="#">
  <i class="bi bi-heart-fill"></i>
</a>

Circle Button - Colorful Styles


<a class="button-circle button-circle-md button-circle-aqua" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-blue" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-golden-yellow" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-pink-edge" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-purple" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-spring-red" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-tan" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-turquiose" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-very-peri" href="#">
  <i class="bi bi-star-fill"></i>
</a>

Circle Button - Colorful Outline Styles


<a class="button-circle button-circle-md button-circle-outline-aqua" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-blue" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-golden-yellow" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-pink-edge" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-purple" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-spring-red" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-tan" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-turquiose" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-very-peri" href="#">
  <i class="bi bi-star-fill"></i>
</a>

Circle Button - Gradient Styles


<a class="button-circle button-circle-md button-circle-gradient-1" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-gradient-2" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-gradient-3" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-gradient-4" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-gradient-5" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-gradient-6" href="#">
  <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-gradient-7" href="#">
  <i class="bi bi-star-fill"></i>
</a>

Circle Button - Social Styles


<a class="button-circle button-circle-md button-circle-social-facebook" href="#">
  <i class="bi bi-facebook"></i>
</a>
<a class="button-circle button-circle-md button-circle-social-twitter" href="#">
  <i class="bi bi-twitter-x"></i>
</a>
<a class="button-circle button-circle-md button-circle-social-instagram" href="#">
  <i class="bi bi-instagram"></i>
</a>
<a class="button-circle button-circle-md button-circle-social-linkedin" href="#">
  <i class="bi bi-linkedin"></i>
</a>
<a class="button-circle button-circle-md button-circle-social-youtube" href="#">
  <i class="bi bi-youtube"></i>
</a>
<a class="button-circle button-circle-md button-circle-social-pinterest" href="#">
  <i class="bi bi-pinterest"></i>
</a>
<a class="button-circle button-circle-md button-circle-social-skype" href="#">
  <i class="bi bi-skype"></i>
</a>
<a class="button-circle button-circle-md button-circle-social-dribbble" href="#">
  <i class="bi bi-dribbble"></i>
</a>
<a class="button-circle button-circle-md button-circle-social-snapchat" href="#">
  <i class="bi bi-snapchat"></i>
</a>
<a class="button-circle button-circle-md button-circle-social-whatsapp" href="#">
  <i class="bi bi-whatsapp"></i>
</a>

Circle Button - White


<a class="button-circle button-circle-md button-circle-white" href="#">
  <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-white-2" href="#">
  <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-white" href="#">
  <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-white-2" href="#">
  <i class="bi bi-heart-fill"></i>
</a>

Circle Button Hover - Slide


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

Circle Button Animation


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