-
-
Buttons for actions
-
As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.
-
Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.
-
Cross browser compatibility
-
IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.
-
-
-
Multiple sizes
-
Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Disabled state
-
For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.
-
- Primary link
- Link
-
-
-
-
-
-
- Heads up!
- We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.
-
-
-
-
One class, multiple tags
-
Use the .btn class on an <a>, <button>, or <input> element.
-
-
-<a class="btn" href="">Link</a>
-<button class="btn" type="submit">
- Button
-</button>
-<input class="btn" type="button"
- value="Input">
-<input class="btn" type="submit"
- value="Submit">
-
-
As a best practice, try to match the element for you context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.
-
-
-