Buttons in Web Pages

Buttons should be used for functionality or special links that need to stand out, such as a page's call to action. Most pages on the SUU website are information-oriented, and they should probably be limited to 2-4 buttons each.

Button Sizes

The following classes are used to dictate the size of a button.

btn btn

btn btn-large btn btn-large

btn btn-mega btn btn-btn-mega

btn btn-small btn btn-small

btn btn-mini btn btn-mini

Button-Block

btn-block can be used with any size and style of button. The class will cause the button to span the full width off its parent container across all screen sizes.

btn btn-block

btn btn-block

Button-Block-Mobile

Sometimes we want our button to expand the full-width of the parent container on mobile widths only. This can be acheived using the class btn-block-mobile in place of btn-block.

btn btn-block-mobile btn-block-mobile

Button Colors

The following classes can be used to change the color appearance of a button. The classes can be combined with the size classes as well.

btn btn-primary btn btn-primary

btn btn-warning btn btn-warning

btn btn-success btn btn-success

btn btn-inverse btn btn-inverse

btn btn-info btn btn-info

Button Colors and Sizes

btn btn-primary btn btn-primary

btn btn-warning btn-large btn btn-warning btn-large

btn btn-primary btn-mega btn btn-primary btn-mega

btn btn-success btn-small btn btn-success btn-small

btn btn-inverse btn-mini btn btn-inverse btn-mini

btn btn-info btn btn-info

Button Group

btn-group

btn dropdown-toggle

Notes

Do not put buttons in the middle of a sentence or paragraph. It disrupts the reader's flow.