White Background Buttons:

Button

Grey Button

Base Color Button

Dark Button

Blue Button

Turquoise Button

Green Button

Lime Button

Yellow Button

Orange Button

Red Button

Purple Button

Brown Button

                              <a class="spd-btn spd-r-btn spd-r-btn-small" href="#">Button</a>
    <a class="spd-btn spd-r-btn-grey spd-r-btn-small" href="#">Grey Button</a>
    <a class="spd-btn spd-r-btn-base spd-r-btn-small" href="#">Base Color Button</a>
    <a class="spd-btn spd-r-btn-dark spd-r-btn-small" href="#">Dark Button</a>
    <a class="spd-btn spd-r-btn-blue spd-r-btn-small" href="#">Blue Button</a>
    <a class="spd-btn spd-r-btn-turquoise spd-r-btn-small" href="#">Turquoise Button</a>
    <a class="spd-btn spd-r-btn-green spd-r-btn-small" href="#">Green Button</a>
    <a class="spd-btn spd-r-btn-lime spd-r-btn-small" href="#">Lime Button</a>
    <a class="spd-btn spd-r-btn-yellow spd-r-btn-small" href="#">Yellow Button</a>
    <a class="spd-btn spd-r-btn-orange spd-r-btn-small" href="#">Orange Button</a>
    <a class="spd-btn spd-r-btn-red spd-r-btn-small" href="#">Red Button</a>
    <a class="spd-btn spd-r-btn-purple spd-r-btn-small" href="#">Purple Button</a>
    <a class="spd-btn spd-r-btn-brown spd-r-btn-small" href="#">Brown Button</a>
  </div>

Button

Grey Button

Base Color Button

Dark Button

Blue Button

Turquoise Button

Green Button

Lime Button

Yellow Button

Orange Button

Red Button

Purple Button

                              <a class="spd-btn spd-r-btn" href="#">Button</a> 
    <a class="spd-btn spd-r-btn-grey" href="#">Grey Button</a>
    <a class="spd-btn spd-r-btn-base" href="#">Base Color Button</a>
    <a class="spd-btn spd-r-btn-dark" href="#">Dark Button</a>
    <a class="spd-btn spd-r-btn-blue" href="#">Blue Button</a>
    <a class="spd-btn spd-r-btn-turquoise" href="#">Turquoise Button</a>
    <a class="spd-btn spd-r-btn-green" href="#">Green Button</a>
    <a class="spd-btn spd-r-btn-lime" href="#">Lime Button</a>
    <a class="spd-btn spd-r-btn-yellow" href="#">Yellow Button</a>
    <a class="spd-btn spd-r-btn-orange" href="#">Orange Button</a>
    <a class="spd-btn spd-r-btn-red" href="#">Red Button</a>
    <a class="spd-btn spd-r-btn-purple" href="#">Purple Button</a>
    <a class="spd-btn spd-r-btn-brown" href="#">Brown Button</a>

Button

Grey Button

Base Color Button

Dark Button

Blue Button

Turquoise Button

Green Button

Lime Button

Yellow Button

Orange Button

Red Button

Purple Button

Brown Button

                            <a class="spd-btn spd-r-btn spd-r-btn-big" href="#">Button</a> 
    <a class="spd-btn spd-r-btn-grey spd-r-btn-big" href="#">Grey Button</a>
    <a class="spd-btn spd-r-btn-base spd-r-btn-big" href="#">Base Color Button</a>
    <a class="spd-btn spd-r-btn-dark spd-r-btn-big" href="#">Dark Button</a>
    <a class="spd-btn spd-r-btn-blue spd-r-btn-big" href="#">Blue Button</a>
    <a class="spd-btn spd-r-btn-turquoise spd-r-btn-big" href="#">Turquoise Button</a>
    <a class="spd-btn spd-r-btn-green spd-r-btn-big" href="#">Green Button</a>
    <a class="spd-btn spd-r-btn-lime spd-r-btn-big" href="#">Lime Button</a>
    <a class="spd-btn spd-r-btn-yellow spd-r-btn-big" href="#">Yellow Button</a>
    <a class="spd-btn spd-r-btn-orange spd-r-btn-big" href="#">Orange Button</a>
    <a class="spd-btn spd-r-btn-red spd-r-btn-big" href="#">Red Button</a>
    <a class="spd-btn spd-r-btn-purple spd-r-btn-big" href="#">Purple Button</a>
    <a class="spd-btn spd-r-btn-brown spd-r-btn-big" href="#">Brown Button</a>

Button

Grey Button

Base Color Button

Dark Button

Blue Button

Turquoise Button

Green Button

Lime Button

Yellow Button

Orange Button

Red Button

Purple Button

Brown Button

                 <a class="spd-btn spd-r-btn spd-r-btn-bigger" href="#">Button</a> 
    <a class="spd-btn spd-r-btn-grey spd-r-btn-bigger" href="#">Grey Button</a>
    <a class="spd-btn spd-r-btn-base spd-r-btn-bigger" href="#">Base Color Button</a>
    <a class="spd-btn spd-r-btn-dark spd-r-btn-bigger" href="#">Dark Button</a>
    <a class="spd-btn spd-r-btn-blue spd-r-btn-bigger" href="#">Blue Button</a>
    <a class="spd-btn spd-r-btn-turquoise spd-r-btn-bigger" href="#">Turquoise Button</a>
    <a class="spd-btn spd-r-btn-green spd-r-btn-bigger" href="#">Green Button</a>
    <a class="spd-btn spd-r-btn-lime spd-r-btn-bigger" href="#">Lime Button</a>
    <a class="spd-btn spd-r-btn-yellow spd-r-btn-bigger" href="#">Yellow Button</a>
    <a class="spd-btn spd-r-btn-orange spd-r-btn-bigger" href="#">Orange Button</a>
    <a class="spd-btn spd-r-btn-red spd-r-btn-bigger" href="#">Red Button</a>
    <a class="spd-btn spd-r-btn-purple spd-r-btn-bigger" href="#">Purple Button</a>
    <a class="spd-btn spd-r-btn-brown spd-r-btn-bigger" href="#">Brown Button</a>

White Background Buttons (style two):

                            
<div class="spd-col-xs-3 spd-col-md-3 ">
    <span class="spd-r-buton spd-r-b_asset spd-r-buton-1 spd-r-btn-small"><a href="#">Sample Button</a></span>
</div>
<div class="spd-col-xs-3 spd-col-md-3 ">
    <span class="spd-r-buton spd-r-b_asset spd-r-buton-1 "><a href="#">Sample Button</a></span>
</div>
<div class="spd-col-xs-3 spd-col-md-3 ">
<span class="spd-r-buton spd-r-b_asset spd-r-buton-1 spd-r-btn-big"><a href="#">Sample Button</a></span>
</div>
<div class="spd-col-xs-3 spd-col-md-3 ">
<span class="spd-r-buton spd-r-b_asset spd-r-buton-1 spd-r-btn-bigger"><a href="#">Sample Button</a></span>
</div>
                            <div class="spd-col-xs-3 spd-col-md-3 ">
    <span class="spd-r-buton spd-r-b_asset spd-r-buton-2 spd-r-btn-small"><a href="#">Sample Button</a></span>
</div>
<div class="spd-col-xs-3 spd-col-md-3 ">
    <span class="spd-r-buton spd-r-b_asset spd-r-buton-2 "><a href="#">Sample Button</a></span>
</div>
<div class="spd-col-xs-3 spd-col-md-3 ">
<span class="spd-r-buton spd-r-b_asset spd-r-buton-2 spd-r-btn-big"><a href="#">Sample Button</a></span>
</div>
<div class="spd-col-xs-3 spd-col-md-3 ">
<span class="spd-r-buton spd-r-b_asset spd-r-buton-2 spd-r-btn-bigger"><a href="#">Sample Button</a></span>
</div>
                 
<div class="spd-col-xs-3 spd-col-md-3 ">
    <span class="spd-r-buton spd-r-b_asset spd-r-buton-3 spd-r-btn-small"><a href="#">Sample Button</a></span>
</div>
<div class="spd-col-xs-3 spd-col-md-3 ">
    <span class="spd-r-buton spd-r-b_asset spd-r-buton-3 "><a href="#">Sample Button</a></span>
</div>
<div class="spd-col-xs-3 spd-col-md-3 ">
<span class="spd-r-buton spd-r-b_asset spd-r-buton-3 spd-r-btn-big"><a href="#">Sample Button</a></span>
</div>
<div class="spd-col-xs-3 spd-col-md-3 ">
<span class="spd-r-buton spd-r-b_asset spd-r-buton-3 spd-r-btn-bigger"><a href="#">Sample Button</a></span>
</div>
                  
<div class="spd-col-xs-3 spd-col-md-3 ">
    <span class="spd-r-buton spd-r-b_asset spd-r-buton-4 spd-r-btn-small"><a href="#">Sample Button</a></span>
</div>
<div class="spd-col-xs-3 spd-col-md-3 ">
    <span class="spd-r-buton spd-r-b_asset spd-r-buton-4 "><a href="#">Sample Button</a></span>
</div>
<div class="spd-col-xs-3 spd-col-md-3 ">
<span class="spd-r-buton spd-r-b_asset spd-r-buton-4 spd-r-btn-big"><a href="#">Sample Button</a></span>
</div>
<div class="spd-col-xs-3 spd-col-md-3 ">
<span class="spd-r-buton spd-r-b_asset spd-r-buton-4 spd-r-btn-bigger"><a href="#">Sample Button</a></span>
</div>
                    
<div class="spd-col-xs-3 spd-col-md-3 ">
    <span class="spd-r-buton spd-r-b_asset spd-r-buton-5 spd-r-btn-small"><a href="#">Sample Button</a></span>
</div>
<div class="spd-col-xs-3 spd-col-md-3 ">
    <span class="spd-r-buton spd-r-b_asset spd-r-buton-5 "><a href="#">Sample Button</a></span>
</div>
<div class="spd-col-xs-3 spd-col-md-3 ">
<span class="spd-r-buton spd-r-b_asset spd-r-buton-5 spd-r-btn-big"><a href="#">Sample Button</a></span>
</div>
<div class="spd-col-xs-3 spd-col-md-3 ">
<span class="spd-r-buton spd-r-b_asset spd-r-buton-5 spd-r-btn-bigger"><a href="#">Sample Button</a></span>
</div>

White Background Buttons (style three):

                    
<div class="spd-col-xs-3 spd-col-md-3 spd-padding-bottom-30 ">
   <a class="spd-r-a_demo_four" href="#"> Click me! </a>
</div>
<div class="spd-col-xs-3 spd-col-md-3 spd-padding-bottom-30">
   <a class="spd-r-a_demo_one" href="#"> Click me! </a>
</div>
<div class="spd-col-xs-3 spd-col-md-3 spd-padding-bottom-30 ">
   <a class="spd-r-a_demo_two" href="#"> Click me! </a>
</div>
<div class="spd-col-xs-3 spd-col-md-3 spd-padding-bottom-30 ">
   <a class="spd-r-a_demo_three" href="#"> Click me! </a>
</div>

Animated Buttons:

                    <div class="spd-col-xs-3 spd-col-md-3 spd-padding-bottom-30  spd-r-a-btn  ">
       <button>
      <img class="splash" src="/portals/_default/Skins/Notus/images/watersplash_3.svg" alt="Splash!" />
      <img class="splash splash-2" src="/portals/_default/Skins/Notus/images/watersplash_3.svg" alt="Splash!" />
      <img class="sub" src="/portals/_default/Skins/Notus/images/sublogo_16.svg" class="Submarine" />
      <img class="submerge" src="/portals/_default/Skins/Notus/images/submerge.svg" alt="Water" />
      <span class="main-text">
        <span class="submit">Sub</span>mit
      </span>
      <span class="sent-text">
        <span class="sent">Sent!</span>
      </span>
    </button>
        </div>

Dark Background Buttons:

Button

Grey Button

Base Color Button

Dark Button

Blue Button

Turquoise Button

Green Button

Lime Button

Yellow Button

Orange Button

Red Button

Purple Button

Brown Button

                 <a class="spd-btn spd-r-btn spd-r-btn-small" href="#">Button</a> 
    <a class="spd-btn spd-r-btn-grey spd-r-btn-small" href="#">Grey Button</a>
    <a class="spd-btn spd-r-btn-base spd-r-btn-small" href="#">Base Color Button</a>
    <a class="spd-btn spd-r-btn-dark spd-r-btn-small" href="#">Dark Button</a>
    <a class="spd-btn spd-r-btn-blue spd-r-btn-small" href="#">Blue Button</a>
    <a class="spd-btn spd-r-btn-turquoise spd-r-btn-small" href="#">Turquoise Button</a>
    <a class="spd-btn spd-r-btn-green spd-r-btn-small" href="#">Green Button</a>
    <a class="spd-btn spd-r-btn-lime spd-r-btn-small" href="#">Lime Button</a>
    <a class="spd-btn spd-r-btn-yellow spd-r-btn-small" href="#">Yellow Button</a>
    <a class="spd-btn spd-r-btn-orange spd-r-btn-small" href="#">Orange Button</a>
    <a class="spd-btn spd-r-btn-red spd-r-btn-small" href="#">Red Button</a>
    <a class="spd-btn spd-r-btn-purple spd-r-btn-small" href="#">Purple Button</a>
    <a class="spd-btn spd-r-btn-brown spd-r-btn-small" href="#">Brown Button</a>

Button

Grey Button

Base Color Button

Dark Button

Blue Button

Turquoise Button

Green Button

Lime Button

Yellow Button

Orange Button

Red Button

Purple Button

Brown Button

                 <a class="spd-btn spd-r-btn" href="#">Button</a> 
    <a class="spd-btn spd-r-btn-grey" href="#">Grey Button</a>
    <a class="spd-btn spd-r-btn-base" href="#">Base Color Button</a>
    <a class="spd-btn spd-r-btn-dark" href="#">Dark Button</a>
    <a class="spd-btn spd-r-btn-blue" href="#">Blue Button</a>
    <a class="spd-btn spd-r-btn-turquoise" href="#">Turquoise Button</a>
    <a class="spd-btn spd-r-btn-green" href="#">Green Button</a>
    <a class="spd-btn spd-r-btn-lime" href="#">Lime Button</a>
    <a class="spd-btn spd-r-btn-yellow" href="#">Yellow Button</a>
    <a class="spd-btn spd-r-btn-orange" href="#">Orange Button</a>
    <a class="spd-btn spd-r-btn-red" href="#">Red Button</a>
    <a class="spd-btn spd-r-btn-purple" href="#">Purple Button</a>
    <a class="spd-btn spd-r-btn-brown" href="#">Brown Button</a>

Button

Grey Button

Base Color Button

Dark Button

Blue Button

Turquoise Button

Green Button

Lime Button

Yellow Button

Orange Button

Red Button

Purple Button

Brown Button

                <a class="spd-btn spd-r-btn spd-r-btn-big" href="#">Button</a> 
    <a class="spd-btn spd-r-btn-grey spd-r-btn-big" href="#">Grey Button</a>
    <a class="spd-btn spd-r-btn-base spd-r-btn-big" href="#">Base Color Button</a>
    <a class="spd-btn spd-r-btn-dark spd-r-btn-big" href="#">Dark Button</a>
    <a class="spd-btn spd-r-btn-blue spd-r-btn-big" href="#">Blue Button</a>
    <a class="spd-btn spd-r-btn-turquoise spd-r-btn-big" href="#">Turquoise Button</a>
    <a class="spd-btn spd-r-btn-green spd-r-btn-big" href="#">Green Button</a>
    <a class="spd-btn spd-r-btn-lime spd-r-btn-big" href="#">Lime Button</a>
    <a class="spd-btn spd-r-btn-yellow spd-r-btn-big" href="#">Yellow Button</a>
    <a class="spd-btn spd-r-btn-orange spd-r-btn-big" href="#">Orange Button</a>
    <a class="spd-btn spd-r-btn-red spd-r-btn-big" href="#">Red Button</a>
    <a class="spd-btn spd-r-btn-purple spd-r-btn-big" href="#">Purple Button</a>
    <a class="spd-btn spd-r-btn-brown spd-r-btn-big" href="#">Brown Button</a>

Button

Grey Button

Base Color Button

Dark Button

Blue Button

Turquoise Button

Green Button

Lime Button

Yellow Button

Orange Button

Red Button

Purple Button

Brown Button

                <a class="spd-btn spd-r-btn spd-r-btn-bigger" href="#">Button</a> 
    <a class="spd-btn spd-r-btn-grey spd-r-btn-bigger" href="#">Grey Button</a>
    <a class="spd-btn spd-r-btn-base spd-r-btn-bigger" href="#">Base Color Button</a>
    <a class="spd-btn spd-r-btn-dark spd-r-btn-bigger" href="#">Dark Button</a>
    <a class="spd-btn spd-r-btn-blue spd-r-btn-bigger" href="#">Blue Button</a>
    <a class="spd-btn spd-r-btn-turquoise spd-r-btn-bigger" href="#">Turquoise Button</a>
    <a class="spd-btn spd-r-btn-green spd-r-btn-bigger" href="#">Green Button</a>
    <a class="spd-btn spd-r-btn-lime spd-r-btn-bigger" href="#">Lime Button</a>
    <a class="spd-btn spd-r-btn-yellow spd-r-btn-bigger" href="#">Yellow Button</a>
    <a class="spd-btn spd-r-btn-orange spd-r-btn-bigger" href="#">Orange Button</a>
    <a class="spd-btn spd-r-btn-red spd-r-btn-bigger" href="#">Red Button</a>
    <a class="spd-btn spd-r-btn-purple spd-r-btn-bigger" href="#">Purple Button</a>
    <a class="spd-btn spd-r-btn-brown spd-r-btn-bigger" href="#">Brown Button</a>