How to Change Button Color in Bootstrap

On 11/10/2017

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.

bootstrap-change-button-color-default

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.

bootstrap-change-button-color

And they will look like this on hover state.

bootstrap-change-button-color-on-hover

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:

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 :)

8 comments:

  1. very informative blog. Helps to gain knowledge about new concepts and techniques. Thanks for posting information in this blog
    PHP training in chennai

    ReplyDelete

  2. the blog is very useful, interesting and informative. thank you for sharing the blog with us. keep on updating.

    Software Testing Training in Chennai

    ReplyDelete
  3. Hi Valli,
    Thanks for such awesome blog. Your article is very easy to understand, informative and provide complete overview about software testing. Please consider including rss feed in your website, so I get your recent post on my site.
    Regards,
    Software testing training in chennai

    ReplyDelete
  4. Useful coding.. Bootstrap is a wonderful technique in web designing and i am using bootstrap and another techniques for web designing !!!!
    Web Design company Jaipur

    ReplyDelete
  5. Testing is the fundamental one for working up the application. Programming testing is required to raise the blemishes and goofs for development phrases. It offers a good work for skilled specialists in programming testing field.Thanks for taking time to share this post.
    Regards,
    Testing Training in chennai | Software Training institutes in chennai

    ReplyDelete

Contact Form

Name

Email *

Message *