Buttons

Small Button

<a href="#" class="btn btn-small btn-round btn-yellow">Small</a>
                

Medium Button

<a href="#" class="btn btn-medium btn-round btn-yellow">Medium</a>
                

Large Button

<a href="#" class="btn btn-large btn-round btn-yellow">Large</a>
                

Extra Large Button

<a href="#" class="btn btn-x-large btn-round btn-yellow">Extra Large</a>
                

Square Button

<a href="#" class="btn btn-large btn-square btn-yellow">Square Button</a>
                

Rounded Button

<a href="#" class="btn btn-large btn-round btn-yellow">Round Button</a>
                

Pill Button

<a href="#" class="btn btn-large btn-pill btn-yellow">Pill Shaped Button</a>
                

Transparent Button

<a href="#" class="btn btn-large btn-yellow-transparent">Transparent Button</a>
                

Light Blue Button

<a href="#" class="btn btn-medium btn-round btn-light-blue">Light Blue Button</a>
                

Light Green Button

<a href="#" class="btn btn-medium btn-round btn-light-green">Light Green Button</a>
                

Light Red Button

<a href="#" class="btn btn-medium btn-round btn-light-red">Light Red Button</a>
                

Black Button

<a href="#" class="btn btn-medium btn-round btn-black">Black Button</a>
                

Violet Button

<a href="#" class="btn btn-medium btn-round btn-violet">Violet Button</a>
                

Green Button

<a href="#" class="btn btn-medium btn-round btn-green">Green Button</a>
                

Blue Button

<a href="#" class="btn btn-medium btn-round btn-blue">Blue Button</a>
                

Pink Button

<a href="#" class="btn btn-medium btn-round btn-pink">Pink Button</a>
                

Orange Button

<a href="#" class="btn btn-medium btn-round btn-orange">Orange Button</a>
                

Brown Button

<a href="#" class="btn btn-medium btn-round btn-brown">Brown Button</a>
                

Yellow Button

<a href="#" class="btn btn-medium btn-round btn-yellow">Yellow Button</a>
                

Gray Button

<a href="#" class="btn btn-medium btn-round btn-gray">Gray Button</a>
                

Dark Red Button

<a href="#" class="btn btn-medium btn-round btn-dark-red">Dark Red Button</a>
                

Dark Green Button

<a href="#" class="btn btn-medium btn-round btn-dark-green">Dark Green Button</a>
                

Left Icon

<a href="#" class="btn btn-medium btn-round btn-brown">
    <span class="icon-left"><i class="fa fa-bookmark"></i></span> Left Icon
</a>                
                

Left Icon with Divider

<a href="#" class="btn btn-medium btn-round btn-light-green">
    <span class="icon-left-divider"><i class="fa fa-camera"></i></span> With Divider
</a>
                

Right Icon

<a href="#" class="btn btn-medium btn-round btn-blue">
    Right Icon <span class="icon-right"><i class="fa fa-filter"></i></span></a>
                

Right Icon with Divider

<a href="#" class="btn btn-medium btn-round btn-violet">
    With Divider <span class="icon-right-divider"><i class="fa fa-cloud"></i></span>
</a>
                

Left Icon Pill Shape

<a href="#" class="btn btn-medium btn-pill btn-brown">
    <span class="icon-left"><i class="fa fa-bookmark"></i></span> Left Icon
</a>
                

Right Icon Pill Shape

<a href="#" class="btn btn-medium btn-pill btn-blue">
    Right Icon <span class="icon-right"><i class="fa fa-filter"></i></span>
</a>
                

Left Icon Pill Shape with Divider

<a href="#" class="btn btn-medium btn-pill btn-light-green">
    <span class="icon-left-divider"><i class="fa fa-camera"></i></span> With Divider
</a>
                

Transparent buttons with different styles and Icons

Large Button Medium Button Medium Button Medium Button Small Button Small Button Small Button

Large Orange Transparent Button

<a href="#" class="btn btn-large btn-pill btn-orange-transparent">Large Button</a>
                

Medium Light Red Transparent Button

<a href="#" class="btn btn-medium btn-pill btn-light-red-transparent">Medium Button</a>
                

Medium Brown Transparent Button

<a href="#" class="btn btn-medium btn-pill btn-brown-transparent">Medium Button</a>
                

Medium Yellow Transparent Button

<a href="#" class="btn btn-medium btn-pill btn-yellow-transparent">Medium Button</a>
                

Small Gray Transparent Button

<a href="#" class="btn btn-small btn-pill btn-gray-transparent">Small Button</a>
                

Small Black Transparent Button

<a href="#" class="btn btn-small btn-pill btn-black-transparent">Small Button</a>
                

Small Dark Red Transparent Button

<a href="#" class="btn btn-small btn-pill btn-dark-red-transparent">Small Button</a>
                

Brown Transparent Button with Left Icon

<a href="#" class="btn btn-medium btn-round btn-brown-transparent">
    <span class="icon-left"><i class="fa fa-bookmark"></i></span> Left Icon
</a>
                

Light Green Transparent Button with Divider

<a href="#" class="btn btn-medium btn-pill btn-light-green-transparent">
    <span class="icon-left-divider"><i class="fa fa-camera"></i></span> Icon with Divider
</a>
                

Blue Transparent Button with Right Icon

<a href="#" class="btn btn-medium btn-square btn-blue-transparent">
    Right Icon <span class="icon-right"><i class="fa fa-filter"></i></span>
</a>
                

Dark Red Transparent Button with Divider

<a href="#" class="btn btn-medium btn-pill btn-dark-red-transparent">
    Icon with Divider <span class="icon-right-divider"><i class="fa fa-cloud"></i></span>
</a>
                

Brown Transparent Button with Left Icon

<a href="#" class="btn btn-medium btn-round btn-brown-transparent">
    <span class="icon-left"><i class="fa fa-bookmark"></i></span> Left Icon
</a>
                

Light Green Transparent Button with Divider

<a href="#" class="btn btn-medium btn-pill btn-light-green-transparent">
    <span class="icon-left-divider"><i class="fa fa-camera"></i></span> Icon with Divider
</a>
                

Green Transparent Button

<a href="#" class="btn btn-large btn-round btn-green-transparent">Large Button</a>
                

Pink Transparent Button

<a href="#" class="btn btn-large btn-round btn-pink-transparent">Large Button</a>
                

Violet Transparent Button

<a href="#" class="btn btn-large btn-round btn-violet-transparent">Large Button</a>
                

Orange Transparent Button

<a href="#" class="btn btn-large btn-round btn-orange-transparent">Large Button</a>
                

Dark Green Transparent Button

<a href="#" class="btn btn-large btn-round btn-dark-green-transparent">Large Button</a>
                

Light Blue Transparent

<a href="#" class="btn btn-x-large btn-square btn-light-blue-transparent">
    <span class="icon-left-divider"><i class="fa fa-camera"></i></span> Icon with Divider
</a>
                

Blue Transparent Button


<a href="#" class="btn btn-x-large btn-square btn-blue-transparent">Extra Large Button</a>


                

Light Green Transparent

<a href="#" class="btn btn-x-large btn-square btn-light-green-transparent">
    Icon with Divider <span class="icon-right-divider"><i class="fa fa-filter"></i></span>
</a>