Buttons
Button is a trigger that allows user to take action. We have a different range of options for a button so that you can choose the one that fits your requirement.
Basic Buttons
You can create buttons using 3 tags: <a>, <button>, and <input>. All you have to do is add a class button to the tag.
<a class="button basic" href="#">Anchor</a>
<button class="button"> Button</button>
<input class="button" type="submit" value="Input-Submit">
Colored Buttons
Colored buttons are used when you want to grab user's attention primarily on that button. We have 6 colors available for colored buttons. Check them below
<button class="button primary">Primary</button>
<button class="button secondary">Secondary</button>
<button class="button success">Success</button>
<button class="button info">Info</button>
<button class="button warning">Warning</button>
<button class="button danger">Danger</button>
Inverted Buttons
Inverted buttons are used as secondary buttons in the website. You can use them when you want a button but don't that button to grab user's attention
<button class="button inverted-primary">Primary</button>
<button class="button inverted-secondary">Secondary</button>
<button class="button inverted-success">Success</button>
<button class="button inverted-info">Info</button>
<button class="button inverted-warning">Warning</button>
<button class="button inverted-danger">Danger</button>
Disabled Buttons
When you don't want a user to click on a button before performing some action, just add a class disabled to the button
<button class="button disabled">Disabled</button>
<button class="button primary disabled">Primary</button>
<button class="button inverted-danger disabled">Disabled</button>
Link Buttons
You can add simple link as a button as well. They are compact and are widely used in websites.
<a href="#" class="button-link secondary-text">Button Link</a>
<a href="#" class="button-link danger-text font-w-700">Button Link</a>
Icon Buttons
You can add icons as buttons as well. They are compact and are widely used in websites.
<i class="fas fa-download button"></i>
<i class="fas fa-share-alt button inverted-info"></i>
Floating Buttons
Floating button is fixed at the bottom-right corner. You customize it by adding different color and icon.
<i class="fas fa-plus button danger floating"></i>