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 for the best rendering.
.btn
<a>
<button>
btn
btn btn-primary
btn btn-info
btn btn-success
btn btn-warning
btn btn-danger
btn btn-inverse
btn btn-link
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.
button
Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.
.btn-large
.btn-small
.btn-mini
Large button Large button
Default button Default button
Small button Small button
Mini button Mini button
<p> <button class="btn btn-large btn-primary" type="button">Large button</button> <button class="btn btn-large" type="button">Large button</button></p><p> <button class="btn btn-primary" type="button">Default button</button> <button class="btn" type="button">Default button</button></p><p> <button class="btn btn-small btn-primary" type="button">Small button</button> <button class="btn btn-small" type="button">Small button</button></p><p> <button class="btn btn-mini btn-primary" type="button">Mini button</button> <button class="btn btn-mini" type="button">Mini button</button></p>
Create block level buttons—those that span the full width of a parent— by adding .btn-block.
.btn-block
<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button><button class="btn btn-large btn-block" type="button">Block level button</button>
Make buttons look unclickable by fading them back 50%.
Add the .disabled class to <a> buttons.
.disabled
Primary link Link
<a href="#" class="btn btn-large btn-primary disabled">Primary link</a><a href="#" class="btn btn-large disabled">Link</a>
Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
.active
Add the disabled attribute to <button> buttons.
disabled
Primary button Button
<button type="button" class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button><button type="button" class="btn btn-large" disabled>Button</button>
Use the .btn class on an <a>, <button>, or <input> element.
<input>
<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 your context to ensure matching cross-browser rendering. If you have an input, use an <input type="submit"> for your button.
input
<input type="submit">
Wrap a series of buttons with .btn in .btn-group.
.btn-group
<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button></div>
Combine sets of <div class="btn-group"> into a <div class="btn-toolbar"> for more complex components.
<div class="btn-group">
<div class="btn-toolbar">
<div class="btn-group btn-group-vertical"> ...</div>
Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.
.btn-toolbar