HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Use this plugin if you want to have more control over your buttons
Use this plugin if you want to have more control over your buttons.
For a tutorial about Buttons, read our Bootstrap Buttons Tutorial.
The classes below can be used to style any <a>, <button>, or <input> element:
Class | Description | Example |
---|---|---|
.btn | Adds basic styling to any button | Try it |
.btn-default | Indicates a default/standard button | Try it |
.btn-primary | Provides extra visual weight and identifies the primary action in a set of buttons | Try it |
.btn-success | Indicates a successful or positive action | Try it |
.btn-info | Contextual button for informational alert messages | Try it |
.btn-warning | Indicates caution should be taken with this action | Try it |
.btn-danger | Indicates a dangerous or potentially negative action | Try it |
.btn-link | Makes a button look like a link (will still have button behavior) | Try it |
.btn-lg | Makes a large button | Try it |
.btn-sm | Makes a small button | Try it |
.btn-xs | Makes an extra small button | Try it |
.btn-block | Makes a block-level button (spans the full width of the parent element) | Try it |
.active | Makes the button appear pressed | Try it |
.disabled | Makes the button disabled | Try it |
Enable manually with:
$('.btn').button();
None |
The following table lists all available button methods.
Method | Description | Try it |
---|---|---|
.button("toggle") | Makes the button look pressed | Try it |
.button("loading") | Disables the button and changes the button text to "loading..." | Try it |
.button("reset") | Changes the button text to original text (if changed) | Try it |
.button("string") | Specifies a new button text | Try it |
Using CSS to Customize Buttons
How to remove the rounded borders:
.btn-default {
border-radius: 0;
}
How to add a specific color:
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
}
How to add shadows:
.btn-default {
box-shadow: 1px 2px 5px #000000;
}