Connect With Us:

Default Buttons 


    <a href="#" class="btn btn-primary">Primary Button</a>
    <a href="#" class="btn btn-primary-outline">Primary Outline Button</a>
    <a href="#" class="btn btn-secondary">Secondary Button</a>
    <a href="#" class="btn btn-secondary btn-arrow">Arrow Button</a>
    <a href="#" class="btn btn-gray">Gray Button</a>
    <a href="#" class="btn btn-light">Light Button</a>
    <a href="#" class="btn btn-light btn-light-alt">Alternative Light Button</a>
How to Use

Add a class name with btn

For primary button add class btn-primary. For example:btn btn-primary

.btn-light is only for colored backgrounds

Primary Button Primary Outline Button Secondary Button Arrow Button Gray Button Light Button Alternative Light Button

Button Types 


    <!-- Buttons Types -->
    <a class="btn rounded-0 btn-primary ">Squre Button</a>
    <a class="btn rounded btn-primary ">Semi Rounded Button</a>
    <a class="btn btn-primary ">Default Button</a>
    <a class="btn btn-primary hover-ripple ">Ripple Button</a>
    <a class="btn btn-primary-outline ">Outline Button</a>
How to Use

Add rounded-0 class with btn for squre button.

Add rounded class with btn for semi rounded button.

Add outline class with btn btn-primary for semi rounded button. as an example: btn btn-primary-outline

Add class hover-ripple for ripple effect

Squre Button Semi Rounded Button Default Button Outline Button Ripple Button

Button Sizes


    <!-- Button Sizes -->
    <a class="btn btn-primary btn-lg">Primary Button</a>
    <a class="btn btn-primary btn-md">Primary Button</a>
    <a class="btn btn-primary">Primary Button</a>
    <a class="btn btn-primary btn-sm">Primary Button</a>
How to Use

For small button add .btn-sm with .btn class

Primary Button Primary Button Primary Button Primary Button