Bootstrap buttons
Use MDB’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
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.
Check also our Social Buttons.
Sizes
Fancy larger or smaller buttons? Add .btn-lg
or .btn-sm
for additional sizes.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary 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-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
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.
Button active Button active
<a class="btn btn-primary btn-lg active" role="button">Button active</a>
<a class="btn btn-danger btn-lg active" role="button">Button active</a>
Disabled state
Make buttons look inactive by adding the disabled
boolean attribute to any <button>
element.
Heads up! IE9 and below render disabled buttons with gray, shadowed text that we can’t override.
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
As <a>
elements don’t support the disabled
attribute, you must add the .disabled
class to fake it.
<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>
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.
<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. |