Buttons are widely used in websites or applications. In this tutorial, we will discuss how to use Bootstrap 3 buttons and how to customize the default buttons through examples and explanations.
The following example demonstrates how to quickly create buttons using Bootstrap 3.
## Example
Bootstrap 3 Default Buttons
body {
padding: 50px
}
The above code outputs the following. You can (#).
### CSS
Let's explore the CSS rules used to create these buttons. The primary class used to create buttons is _btn_, as shown below.
.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.428571429; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; background-image: none; border: 1px solid transparent; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
Due to the above CSS code, buttons (with the btn class) are rendered as inline-block, allowing them to be rendered inline with adjacent elements that share a common baseline, but you can add width and height properties to it. Its top and bottom padding are 6 and 12 pixels respectively. The bottom margin is set to 0.
The font size is set to 14 pixels, and the font weight is set to normal. Buttons with the btn class have a line-height of 1.428571429, which is slightly higher than the default height of 1. The text is center-aligned.
The white-space property is set to nowrap, so new lines, spaces, and tabs will be collapsed. The vertically centered element will be positioned in the middle of the height. When you hover over the element, the cursor will appear as a pointer. No background image is displayed here.
A transparent, 1-pixel solid border will be rendered. Due to _border-radius: 4px;_, the corners of the button will be rounded. By increasing or decreasing the value of 4px, you can make the roundness of the corners larger or smaller. Due to _user-select: none_, the text of the button and its child elements will not be selectable. For cross-browser consistency, the same property is applied with multiple vendor prefixes.
Each button shown in the example above has another CSS class besides _btn_, such as btn-default, btn-primary, etc. These classes are used to set the _color_, _background-color_, and _border_ properties of the button. They are CSS rules for normal buttons and buttons with link states (i.e., hover, active, focus, etc.).
The code for the _btn-primary_ class is as follows:
.btn-primary { color: #ffffff; background-color: #428bca; border-color: #357ebd;}
### Buttons of Different Sizes
There are three sizes available. To set each size, you need to add an extra class.
_btn-lg_ for setting large button.
The CSS code for the btn-lg class is as follows:
.btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px;}
Use _btn-sm_ and _btn-xs_ to set buttons with different sizes.
The CSS code for the btn-sm and btn-xs classes is as follows:
.btn-sm,.btn-xs { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px;}.btn-xs { padding: 1px 5px;}
The following code demonstrates different types of buttons with different sizes. You can (#). Below is the screenshot and code.
## Example
Bootstrap 3 Buttons of Different Sizes
body {
padding: 50px
}
### Block Level Buttons
To make a button span the full width of its parent container, Bootstrap 3 provides block level button options. You need to add the _btn-block_ class to the classes discussed above to create block level buttons.
The CSS definition for creating block level buttons is as follows:
.btn-block { display: block; width: 100%; padding-right: 0; padding-left: 0;}.btn-block + .btn-block { margin-top: 5px;}
Below is a screenshot and code for block level buttons. You can (#).
## Example
Bootstrap 3 Block Level Buttons
body {
padding: 50px
}
### Active Buttons
You can use the _active_ CSS class to give a button or link a different appearance to indicate that it is active. Here is a (#), screenshot, and code.
## Example
Bootstrap 3 Active Buttons
body {
padding: 50px
}
Using Chrome Developer Tools, we can see that when the _active_ class is added to a button, the CSS rule takes effect.
Default Active Button
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { color: #333; background-color: #ebebeb; border-color: #adadad;}
Primary Active Button
.btn-primary:hover,
YouTip