Button

Buttons allow users to take action and make choices with a single press.

Standard Button

These are some predefined styles for your buttons each serving its own semantic purpose. There are 5 colors to choose from primary, secondary, success, danger and warning. This can used with class "btn" as follows: btn btn--primary btn--secondary btn--success btn--danger btn--warning

Outline Button

If you want buttons which are transparent, Outline buttons can be used. btn btn--outline--primary btn--outline--secondary btn--outline--success btn--outline--danger btn--outline--warning

Icon and Icon with Label Button

btn btn--round btn--secondary btn--icon btn--squared btn--circular

Floating Action Icon and Link Button

Floating buttons are usually icon buttons that calls for an important action on the overall page. Generally located at bottom right. Magnificent UI provides few classes that makes the design look cool and clean. But the user has to explicitly define the position of the buttons according to their respective use cases. By default it is absolute to the viewport. btn btn--primary btn--icon btn--circular btn--floating

Note: Used 10px as root font size.