How to Change Button Color in Bootstrap

A bootstrap tutorial on how to change button color in twitter bootstrap css.

Over the years I have written several tutorials on bootstrap customization. Using twitter bootstrap framework for web development is good; in fact it makes the development process incredibly easier. But if you don't change the look and feel of your template then probably you will end up looking same as million other websites on the internet. You can get some nice bootstrap skins here else learn to customize it by yourself with our bootstrap tutorials. It's really simpler than you think and lot more fun.

Now let's see how to change button color in bootstrap.

How to Change Button Color in Bootstrap?

Bootstrap offers some default button classes to create buttons quickly. And it also comes with css classes that allow you to control the size of those buttons (.btn-lg .btn-sm & .btn-xs).

Here are the default button styles of bootstrap.

HTML Markup for Creating Bootstrap Buttons:

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>

The above markup renders default bootstrap buttons like this.

Now we'll override these basic bootstrap button styles to change the color and behavior of the buttons.

CSS Styles:

    /* default button */
    .btn-default {
        background-color: #FFF;
        color: #333;
        border-color: #adadad;
        border-radius: 25px;
    }
    .btn-default:hover,
    .btn-default:focus,
    .btn-default:active    {
        background-color: #ebebeb;
        color: #333;
        border-color: #adadad;
    }
    
    /* primary button */
    .btn-primary {
        background-color: #FFF;
        color: #285e8e;
        border-color: #3276b1;
        border-radius: 25px;
    }
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active    {
        background-color: #3276b1;
        color: #FFF;
        border-color: #285e8e;
    }

    /* success button */
    .btn-success {
        background-color: #FFF;
        color: #398439;
        border-color: #47a447;
        border-radius: 25px;
    }
    .btn-success:hover,
    .btn-success:focus,
    .btn-success:active    {
        background-color: #47a447;
        color: #FFF;
        border-color: #398439;
    }

    /* info button */
    .btn-info {
        background-color: #FFF;
        color: #269abc;
        border-color: #39b3d7;
        border-radius: 25px;
    }
    .btn-info:hover,
    .btn-info:focus,
    .btn-info:active    {
        background-color: #39b3d7;
        color: #FFF;
        border-color: #269abc;
    }
    
    /* warning button */
    .btn-warning {
        background-color: #FFF;
        color: #d58512;
        border-color: #ed9c28;
        border-radius: 25px;
    }
    .btn-warning:hover,
    .btn-warning:focus,
    .btn-warning:active    {
        background-color: #ed9c28;
        color: #FFF;
        border-color: #d58512;
    }

    /* danger button */
    .btn-danger {
        background-color: #FFF;
        color: #ac2925;
        border-color: #d2322d;
        border-radius: 25px;
    }
    .btn-danger:hover,
    .btn-danger:focus,
    .btn-danger:active {
        background-color: #d2322d;
        color: #FFF;
        border-color: #ac2925;
    }

The above css styles will now make the buttons to look like this.

And they will look like this on hover state.

What if you want to keep the basic buttons but want to create some totally new button styles? Yep you can do it. Just create a new button class (like .btn-new) and style it according to your preference and you are done.

Also Read: How to Add Icons to Bootstrap Buttons

That explains about changing button color in bootstrap. Just take some time to customize the default bootstrap template and the results will be definitely rewarding :)

Tweet