Marlow Braide > Skin > Short Codes > Shortcode Sample 1

White Background Buttons:

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

Get The Code:

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

Get The Code:

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

Get The Code:

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

Sample Button

Get The Code:

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

Sample Button

Get The Code:

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

Sample Button

Get The Code:

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

Sample Button

Get The Code:

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

Sample Button

Get The Code:

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

Click me!

Get The Code:

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

Get The Code:

                    <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/Shadhin/images/watersplash_3.svg" alt="Splash!" />
      <img class="splash splash-2" src="/portals/_default/Skins/Shadhin/images/watersplash_3.svg" alt="Splash!" />
      <img class="sub" src="/portals/_default/Skins/Shadhin/images/sublogo_16.svg" class="Submarine" />
      <img class="submerge" src="/portals/_default/Skins/Shadhin/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:

Get The Code:

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

Get The Code:

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

Get The Code:

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

Get The Code:

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

Get The Code:

Get The Code:

Get The Code:

Get The Code:

White Background Buttons (style two):

Get The Code:

Get The Code:

Get The Code:

Get The Code:

Get The Code:

White Background Buttons (style three):

Get The Code:

Animated Buttons:

Get The Code:

Dark Background Buttons:

Get The Code:

Get The Code:

Get The Code:

Get The Code:

RECENT POSTS

LATEST TWEETS

GET IN TOUCH

White Background Buttons:

White Background Buttons (style two):

White Background Buttons (style three):

Animated Buttons:

Dark Background Buttons:

Follow Us: