Components

Buttons

Buttons are also called as call to action. We have range of buttons and their states. You may use <a> tag or <button> element, you need to add respective classes, and you are good to go.

Primary Buttons

Primary buttons comes with 5 variants: basic primary button, outlined button, primary link button, icon button & button with icon. Just include btn primary-btn to your <a> tag or <button> element.

Code Snippets

              
               <!-- Primary Buttons-->
                <button class="btn primary-btn m-1">Primary Button</button>
                <button class="btn primary-outline-btn m-1">Primary Outline</button>
                <button class="btn primary-link-btn m-1">Primary Link</button>
                <button class="btn primary-icon-btn m-1"><i class="fa fa-envelope-open" aria-hidden="true"></i></button>
                <button class="btn primary-btn m-1">
                  <i class="fa fa-heart" aria-hidden="true"></i><span class="p-l-1">Icon on button</span>
                </button>

Colored Buttons

Color of buttons can be changed as well. You need to include class red-outlined-content, blue-outlined-content, yellow-outlined-content, &green-outlined-content to change color.

Code Snippets

              
               <!-- Colored Buttons -->
                <button class="btn red-outlined-content m-1">Error</button>
                <button class="btn blue-outlined-content m-1">Info</button>
                <button class="btn yellow-outlined-content m-1">Warning</button>
                <button class="btn green-outlined-content m-1">Success</button>
                <button class="btn blue-bg">
                  <span class="p-r-1">Send</span><i class="fa fa-paper-plane" aria-hidden="true"></i>
                </button>

Disabled Buttons

To disable the button, you need to include class disabled-btn.

Code Snippets

              
               <!-- Disabled Buttons -->
                <button class="btn primary-btn disabled-btn m-1">Primary Button</button>
                <button class="btn primary-outline-btn disabled-btn m-1">Primary Outline</button>
                <button class="btn primary-link-btn disabled-btn m-1">Primary Link</button>
                <button class="btn primary-icon-btn disabled-btn m-1">
                  <i class="fa fa-envelope-open" aria-hidden="true"></i>
                </button>
                <button class="btn blue-bg disabled-btn">
                  <span class="p-r-1">Send</span><i class="fa fa-paper-plane" aria-hidden="true"></i>
                </button>

Floating Action Button

Floating-action buttons can be customized by adding the font-awesome icon of your choice. This button will be fixed to right-bottom corner. Just include floating-btn class to you button.

Code Snippets

              
               <!-- Floating Action Button -->
                <button class="btn primary-btn floating-btn grid-ctr m-1">
                  <i class="fa fa-plus" aria-hidden="true"></i>
                </button>
Previous Next