Button Configuration
While Bootstrap gives you the ability to do a lot of things with buttons, we'd like to encourage publishers to pull back on the reigns and stick with a few basic styles to keep our sites consistant. If we all use the same colors and styles to highlight important button actions, then users will notice them on all the pages. If we are all doing something different, users will have to try to figure it out on all the siloed sites independently. Buttons have a few major configuration options which are color, size, and style.
With that in mind, use:
- Use buttons (
<button class="btn btn-primary"></button>) for command like actions a user can take. - Use links visually styled as a button (
<a href="" class="btn btn-primary"></a>) to draw additional attention to a link that will direct users to a new page or a different location on the same page
Color
Technically you can use almost 10 colors for your buttons. However we recommend you use only about half that, and really for the most part, 2 or 3 under most circumstances. The few that should suffice in most scenarios are primary, info, and link. You may optionally use secondary, bright-light, and green.
These buttons should be suited for most applications, but even then, you shouldn't just randomly pick and use whatever color you want. Most of the time you should try to use primary and info. The other buttons have specific uses which we'll outline below.
Link & Secondary
You may wonder why you'd ever use the btn-link class as the button no longer looks like a button. However you you notice in the examples above, the text is all inline. The link button is useful when you have multiple buttons and one or more are less important or you otherwise just don't want them styled. The btn-link class will keep the links aligned, but won't draw as much attention.
The secondary button serves generally the same role as the link button, that is when you don't want to draw attention to a button. However the secondary button also can stand alone, unlike the link button which sort of looks odd all by itself. If for some reason you need a button but you don't want it to stand out, consider using the secondary button class.
Bright Light & Green
These two buttons server the opposite role as link and secondary as they are used to draw additional attention. They are best used as Call to Action buttons on a page or often times the more important action on a page. For example a sign-up or subscribe button for a newsletter, or a registration button for an event page. If you want to draw attention to an action, consider using one of these.
It's best not to mix these buttons or overuse them on a page. Also, their colors require larger bold text for accessibility reasons, so they are not compatible with some bootstrap items such as input groups. Please do not adjust text sizes.
Other Colors
Other button colors such as contextual should really only be used in a web application scenario and to convey contextual feedback to the user. If you have a "delete" button for example, the red btn-danger button may be appropriate, but we simply ask that generally for web pages you do not use other colors unless there is a very specific reason to do so.
Size
The default sizing of buttons is generally the best, but when putting buttons in the content, you may want the button to stand out a bit more. Adding the btn-lg class in this case is accetable. The main thing to consider is to keep things consistant on a page. Generall you don't want to mix buttons sizes on a page.
Style
The only styling decision that needs to be made with buttons is to either use the default style or the outline style. The outline style essentially inverses the colors and instead of using a background color, it uses that color for the border and text, and the background is white. This style should really only be used when the button is placed on a background color, and even then, it's not always required. Often times the white or secondary buttons are an option, as well as the normal colors.
If you want to use the outline style on a background color, we ask that you use the btn-outline-secondary class (for dark backgrounds) or the btn-outline-primary class for light backgrounds most of the time.
Button Issues
After assessing a large number of websites, we've noticed an overuse of the btn-block class which makes the button span the full width of its parent container. While this is an alternate button style, it's currently overused and can create usability problems when it's very large. Buttons use the same font as headings, so when the buttons are too large, users sometimes think they are headings with a background color. Web usability 101 tells us links should look like links and buttons should look like buttons or users won't recognize them. Buttons that span the full width of the page don't look like buttons.
The full width buttons can work great inside narrow width element, like at the bottom of a left navigation or inside a narrow box. These buttons, while they span the full width of their container, are still narrow and look like buttons.
Please take care if you use this button class, and please don't overuse it. If you have three buttons, consider just using normal button styles to have them side by side, or if you want them stacked just use a normal list.
Consider the content here. This is a common example of how buttons are used on many sites. We'd like to avoide buttons like this and consider these alternatives.
Here is an alternative using flexbox to evenly space the buttons horizontally which fills the same horizontal space and less vertial space.