Button

Buttons are used in two ways — buttons and call to action links. Buttons are always associated with some event — add an item to cart button in shopping sites. Call to actions are used to grab users attention to some specific thing that you want the user to click at. There are various variants of buttons. These classes can be used on both buttons and anchor links

Contained button

Buttons with background color are usually used known as contained buttons and they are used as call to action buttons — usually with primary background. There are other types also such as secondary, danger — to indicate things that might cause something to be deleted, and success — for affirmations.

User can create a button by adding class .btn followed by any of .btn-primary.btn-secondary.btn-danger, & .btn-success to create any of the following types of buttons






            

Outline button

These are secondary buttons. They usually have a outline with normal background as the document. They are used to provide a method to invoke an action which the user is likely to do only if he / she doesn't want to do the primary action





            

Link button

These are links — to other parts of the webpage or to other websites. They can also be made rounded by adding a class .btn-rounded

Buttons with Icons

These buttons along with text have icons and are generally seen in shopping sites.





            

Floating action button

these buttons are fixed to a particular part of the viewport and are stacked on top of all the things. the always appear in the viewport and are usually used to provide a way to allow user to scroll to top or open menus