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