❮ Bootstrap Typography Bootstrap V2 Carousel Plugin ❯

Bootstrap `Buttons`

Objective

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.

Using Default Buttons

The following example demonstrates how to quickly create buttons using Bootstrap 3.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 3 Default Buttons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
        body {
            padding: 50px
        }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries. -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    &lt;!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasizes the button, making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

The above code produces the following output. You can view the live example here.

CSS

We will explore the CSS rules used to create these buttons. The main class for creating 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 the button to be inline with adjacent elements that share a common baseline, but you can give it width and height attributes. Its top and bottom padding are set to 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, slightly taller than the default height of 1. Text is centered.

The white-space property is set to nowrap, so new lines, spaces, and tabs will collapse. Related vertically centered elements will be positioned in the middle of the height. When you hover the mouse over the related elements, the cursor will appear as a pointer shape. No background image will be displayed here.

A transparent, 1-pixel solid border will be displayed here. Due to border-radius: 4px;, the corners of the related buttons 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 related buttons and their child elements will not be selectable. For cross-browser consistency, the same properties are applied with multiple vendor prefixes.

Each button shown in the example above has another CSS class in addition to btn, such as btn-default, btn-primary, etc. These classes are used to set the color, background-color, and border properties of the buttons. They are CSS rules for regular 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 for setting. To set each size, an additional class needs to be added.

btn-lg for setting large button.

<button type="button" class="btn btn-primary btn-lg">Large button</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.

<button type="button" class="btn btn-primary btn-sm">Large button</button>
<button type="button" class="btn btn-primary btn-xs">Large button</button>

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 buttons of different types and sizes. You can view the live demo here. Below is a screenshot and the code.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 3 Buttons of Different Sizes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
        body {
            padding: 50px
        }
    </style>

</head> <body>  <p> <button type="button" class="btn btn-default btn-sm">Default small button</button> <button type="button" class="btn btn-default btn-lg">Default large button</button> <button type="button" class="btn btn-default btn-xs">Default extra small button</button> </p> <p>  <button type="button" class="btn btn-primary btn-sm">Small primary button</button> <button type="button" class="btn btn-primary btn-lg">Large primary button</button> <button type="button" class="btn btn-primary btn-xs">Extra small primary button</button> </p> <p>  <button type="button" class="btn btn-success btn-sm">Small success button</button> <button type="button" class="btn btn-success btn-lg">Large success button</button> <button type="button" class="btn btn-success btn-xs">Extra small success button</button> </p> <p>  <button type="button" class="btn btn-info btn-sm">Small info button</button> <button type="button" class="btn btn-info btn-lg">Large info button</button> <button type="button" class="btn btn-info btn-xs">Extra small info button</button> </p> <p>  <button type="button" class="btn btn-warning btn-sm">Small warning button</button> <button type="button" class="btn btn-warning btn-lg">Large warning button</button> <button type="button" class="btn btn-warning btn-xs">Extra small warning button</button> </p> <p>  <button type="button" class="btn btn-danger btn-sm">Small danger button</button> <button type="button" class="btn btn-danger btn-lg">Large danger button</button> <button type="button" class="btn btn-danger btn-xs">Extra small danger button</button> </p> <p>  <button type="button" class="btn btn-link btn-sm">Small link button</button>

<button type="button" class="btn btn-link btn-lg">Large Link Button</button>
</p>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

Block-level Buttons

To make the button take up the full width of its container, Bootstrap 3 offers block-level button options. You need to add the btn-block class to the classes discussed above to create block-level buttons.

<button type="button" class="btn btn-primary btn-lg btn-block">Large button</button>
<button type="button" class="btn btn-success btn-lg btn-block">Large button</button>

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 of block-level buttons. You can click here to view the example online.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 3 Block-level Buttons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
        body {
            padding: 50px
        }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    &lt;!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <!-- Standard button -->
            <p>
                <button type="button" class="btn btn-primary btn-sm btn-block">Default Small Block-level Button</button>
                <button type="button" class="btn btn-default btn-lg btn-block">Default Large Block-level Button</button>
                <button type="button" class="btn btn-primary btn-xs btn-block">Default Extra Small Block-level Button</button>
            </p>
            <p>
                <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->

<button type="button" class="btn btn-primary btn-sm btn-block">Small Primary Block Button</button> <button type="button" class="btn btn-primary btn-lg btn-block">Large Primary Block Button</button> <button type="button" class="btn btn-primary btn-xs btn-block">Extra Small Primary Block Button</button> </p> <p>  <button type="button" class="btn btn-success btn-sm btn-block">Small Success Block Button</button> <button type="button" class="btn btn-success btn-lg btn-block">Large Success Block Button</button> <button type="button" class="btn btn-success btn-xs btn-block">Extra Small Success Block Button</button> </p> <p>  <button type="button" class="btn btn-info btn-sm btn-block">Small Info Block Button</button> <button type="button" class="btn btn-info btn-lg btn-block">Large Info Block Button</button> <button type="button" class="btn btn-info btn-xs btn-block">Extra Small Info Block Button</button> </p> <p>  <button type="button" class="btn btn-warning btn-sm btn-block">Small Warning Block Button</button> <button type="button" class="btn btn-warning btn-lg btn-block">Large Warning Block Button</button> <button type="button" class="btn btn-warning btn-xs btn-block">Extra Small Warning Block Button</button> </p> <p>  <button type="button" class="btn btn-danger btn-sm btn-block">Small Danger Block Button</button> <button type="button" class="btn btn-danger btn-lg btn-block">Large Danger Block Button</button> <button type="button" class="btn btn-danger btn-xs btn-block">Extra Small Danger Block Button</button> </p> <p>  <button type="button" class="btn btn-link btn-sm btn-block">Small Link Block Button</button> <button type="button" class="btn btn-link btn-lg btn-block">Large Link Block Button</button> </p>

</div>
    </div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

Active Buttons

You can use the active CSS class to give buttons or links a different appearance to show that they are active. Here is an example demonstration, screenshot, and code.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 3 Active Buttons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
        body {
            padding: 50px
        }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    &lt;!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- Standard button -->
<button type="button" class="btn btn-default active">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary active">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success active">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info active">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning active">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger active">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link active">Link</button>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

Using Chrome Developer Tools, we find that the CSS rules take effect when the button is added with the active class.

Default Active Button

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, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { color: #fff; background-color: #3276b1; border-color: #285e8e; }


Success Active Button

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success { color: #fff; background-color: #47a447; border-color: #398439; }


Info Active Button

.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info { color: #fff; background-color: #39b3d7; border-color: #269abc; }


Warning Active Button

.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning { color: #fff; background-color: #ed9c28; border-color: #d58512; }


Danger Active Button

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger { color: #fff; background-color: #d2322d; border-color: #ac2925; }


Link Active Button

.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active { border-color: transparent; }


So, you can see these are achieved by changing the color, background-color, and border-color properties.

### Disabled Buttons

You can use the *disabled* CSS class to give buttons or links a different appearance to show that they are disabled. Here is an [example demo](../try/tryit.php?filename=bootstrap-disabled-buttons-example), screenshot, and code.

To make the button appear slightly blurred, use the following CSS rules (found through Chrome Developer Tools):

.btn[disabled], fieldset[disabled] .btn { pointer-events: none; cursor: not-allowed; opacity: .65; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; }


## Example

<html> <head> <title>Bootstrap 3 Disabled Buttons</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen"> <style> body { padding: 50px } </style>

```html
<!-- HTML5 Shim and Respond.js IE8 support for HTML5 elements and media queries. -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
&lt;!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Standard button -->
<button type="button" class="btn btn-default" disabled="disabled">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary" disabled="disabled">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success" disabled="disabled">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info" disabled="disabled">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning" disabled="disabled">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger" disabled="disabled">Danger</button>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

Disabled Anchor Elements

When an anchor element with btn and other related classes is rendered as disabled, it is slightly different from the normal state. Firstly, the link of the anchor element still exists, only the appearance and feel are changed. Additionally, you cannot use them in navigation bars.

Click here to view the demo online. The code is as follows:

Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 3 Disabled Anchor Buttons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
        body {
            padding: 50px
        }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support for HTML5 elements and media queries. -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    &lt;!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- Standard button -->

<a href="http://www.example.com" class="btn btn-default disabled" role="button">Default</a>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<a href="http://www.example.com" class="btn btn-primary disabled" role="button">Primary</a>

<!-- Indicates a successful or positive action -->
<a href="http://www.example.com" class="btn btn-success disabled" role="button">Success</a>

<!-- Contextual button for informational alert messages -->
<a href="http://www.example.com" class="btn btn-info disabled" role="button">Info</a>

<!-- Indicates caution should be taken with this action -->
<a href="http://www.example.com" class="btn btn-warning disabled" role="button">Warning</a>

<!-- Indicates a dangerous or potentially negative action -->
<a href="http://www.example.com" class="btn btn-danger disabled" role="button">Danger</a>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

Please note that role="button" is used for accessibility purposes.

Button Tags

You can use button classes on button, a, and input elements to turn them into button tags. However, it is recommended to use button elements for consistency, as they can cause cross-browser inconsistencies otherwise.

The following example demonstrates how to use button tags.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 3 Button Tags Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style>
        body {
            padding: 50px
        }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    &lt;!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<p>
    <a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">
</p>
<p>
    <a class="btn btn-primary" href="#" role="button">Link</a>
    <button class="btn btn-primary" type="submit">Button</button>
</p>

<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
</p>
<p>
<a class="btn btn-success" href="#" role="button">Link</a>
<button class="btn btn-success" type="submit">Button</button>
<input class="btn btn-success" type="button" value="Input">
<input class="btn btn-success" type="submit" value="Submit">
</p>
<p>
<a class="btn btn-info" href="#" role="button">Link</a>
<button class="btn btn-info" type="submit">Button</button>
<input class="btn btn-info" type="button" value="Input">
<input class="btn btn-info" type="submit" value="Submit">
</p>
<p>
<a class="btn btn-warning" href="#" role="button">Link</a>
<button class="btn btn-warning" type="submit">Button</button>
<input class="btn btn-warning" type="button" value="Input">
<input class="btn btn-warning" type="submit" value="Submit">
</p>
<p>
<a class="btn btn-danger" href="#" role="button">Link</a>
<button class="btn btn-danger" type="submit">Button</button>
<input class="btn btn-danger" type="button" value="Input">
<input class="btn btn-danger" type="submit" value="Submit">
</p>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>

Click here to view the demo online.

Customizing Buttons

Now we will start with the default button and customize it to have a completely different look and feel.

We will start with the following button code:

<button type="button" class="btn btn-default">Default</button>

Now we will create a CSS class btn-w3r and replace btn-default with it. So, we will write the following code to replace the above code:

<button type="button" class="btn btn-w3r">Default</button>

First, we will change the background color by adding the following CSS:

.btn-w3r {
background: #cb60b3; /* Old browsers */
background: -moz-linear-gradient(top, #cb60b3 0%, #ad1283 50%, #de47ac 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb60b3), color-stop(50%,#ad1283), color-stop(100%,#de47ac)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* IE10+ */
background: linear-gradient(to bottom,  #cb60b3 0%,#ad1283 50%,#de47ac 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=0 ); /* IE6-9 */
}

The button now looks like this:

To change the font color, we will append the following CSS to the existing btn-w3r class:

color:#fff;

Now, to make the button shape look like a circle, we will add the following CSS before the existing btn-w3r class:

width: 200px;
height: 200px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;

To add a hover effect, we will add the following CSS code:

.btn-w3r:hover {
background: #333; 
color:#e75616;
}

Here is the hover effect of the button after adding the above CSS code:

You can click here to view the online demo of the custom button we created.

❮ Bootstrap Typography Bootstrap V2 Carousel Plugin ❯

Bootstrap Buttons

Objective

Using Default Buttons

Example

CSS

Buttons of Different Sizes

Example

Block-level Buttons

Example

Active Buttons

Example

Disabled Anchor Elements

Example

Button Tags

Example

Customizing Buttons

Bootstrap `Buttons`