Bootstrap Buttons
Bootstrap buttons are components which are triggering a desirable user interaction. Easy to customize in terms of size, shape, and color.
All the visually attractive and highly functional buttons we provided you with are fully customizable and easily adjustable to your needs.
Each of them contains characteristic Material Design elements, such as shadows, living colors, subtle animation on hovering, or charming waves effect triggered by clicking.
Sizes
Fancy larger or smaller buttons? Add .btn-lg
or .btn-sm
for additional sizes.
<button type="button" class="btn peach-gradient btn-lg">Large button</button>
<button type="button" class="btn purple-gradient btn-lg">Large button</button>
<button type="button" class="btn peach-gradient btn-sm">Small button</button>
<button type="button" class="btn purple-gradient btn-sm">Small button</button>
Create block level buttons—those that span the full width of a parent—by adding .btn-block
.
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-light-blue btn-lg btn-block">Block level button</button>
Button states
Active state
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to <button>
s as they use a pseudo-class.
However, you can still force the same active appearance with .active
(and include the aria-pressed="true"
attribute) should you need to replicate the state programmatically.
<a class="btn btn-primary btn-lg active" role="button">Button active</a>
<a class="btn btn-default btn-lg active" role="button">Button active</a>
Disabled state
Make buttons look inactive by adding the disabled
boolean attribute to any <button>
element.
<button type="button" class="btn btn-primary btn-lg" disabled>Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled>Button</button>
Disabled buttons using the <a>
element behave a bit different:
<a>
s don’t support thedisabled
attribute, so you must add the.disabled
class to make it visually appear disabled.- Some future-friendly styles are included to disable all
pointer-events
on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all. - Disabled buttons should include the
aria-disabled="true"
attribute to indicate the state of the element to assistive technologies.
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button">Link</a>
Link functionality caveat
The
.disabled
class usespointer-events: none
to try to disable the link functionality of<a>
s, but that CSS property is not yet standardized. In addition, even in browsers that do supportpointer-events: none
, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, add atabindex="-1"
attribute on these links (to prevent them from receiving keyboard focus) and use custom JavaScript to disable their functionality.
Button plugin
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
Toggle states
Add data-toggle="button"
to toggle a button’s active
state. If you’re pre-toggling a button,
you must manually add the .active
class and aria-pressed="true"
to
the <button>
.
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Single toggle
</button>
Checkbox and radio buttons
Bootstrap’s .button
styles can be applied to other elements, such as <label>
s,
to provide checkbox or radio style button toggling. Add data-toggle="buttons"
to a .btn-group
containing those modified buttons to enable toggling in their respective styles.
The checked state for these buttons is only updated via click
event on the button.
If you use another method to update the input—e.g., with <input type="reset">
or by manually
applying the input’s
checked
property—you’ll need to toggle .active
on the <label>
manually.
Note that pre-checked buttons require you to manually add the .active
class to the input’s <label>
.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
Methods
Method | Description |
---|---|
$().button('toggle') |
Toggles push state. Gives the button the appearance that it has been activated. |