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
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.
Fancy larger or smaller buttons? Add
.btn-mini for two additional sizes.
For disabled buttons, add the
.disabled class to links and the
disabled attribute for
Primary link Link
.disabled as a utility class here, similar to the common
.active class, so no prefix is required.
One class, multiple tags
.btn class on an
- <a class="btn" href="">Link</a>
- <button class="btn" type="submit">
- <input class="btn" type="button"
- <input class="btn" type="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.