Styling Twitter's Bootstrap 3.x Buttons

Question

Twitter's Bootstrap 3 buttons are limited in colors. By default there will be 5 7 colors (default primary, error, warning, info, success and link) See:

enter image description here

Twitter's Bootstrap Buttons

Every button got 3 state (default, active and disabled)

How to add more colors or create custom buttons? This question is already answered for Twitter's Bootstrap 2.x: Styling twitter bootstrap buttons. Bootstrap 3 is not backwards compatible. There will be lot of changes in the less and css files. Support for IE7 will be dropped. TB3 is mobile first. Markup codes will be changed too.

score 51 · Accepted Answer · edited May 23 '17 at 11:54

Add extra colors to your less files and recompile. Also see Twitter Bootstrap Customization Best Practices. update

As mentioned by @ow3n since v3.0.3 use:

.btn-custom {
  .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}

Note in the above @btn-default-color sets the font color,@btn-default-bg the background color and @btn-default-border the color of the border. Colors for states like active, hover and disabled are calculated based on of these parameters.

For example:

.btn-custom {
  .button-variant(blue; red; green);
}

will result in:

enter image description here

For who want to use the CSS direct, replace the colors in this code:

.btn-custom {
  color: #0000ff;
  background-color: #ff0000;
  border-color: #008000;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
  color: #0000ff;
  background-color: #d60000;
  border-color: #004300;
}
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
  background-image: none;
}
.btn-custom.disabled,
.btn-custom[disabled],
fieldset[disabled] .btn-custom,
.btn-custom.disabled:hover,
.btn-custom[disabled]:hover,
fieldset[disabled] .btn-custom:hover,
.btn-custom.disabled:focus,
.btn-custom[disabled]:focus,
fieldset[disabled] .btn-custom:focus,
.btn-custom.disabled:active,
.btn-custom[disabled]:active,
fieldset[disabled] .btn-custom:active,
.btn-custom.disabled.active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom.active {
  background-color: #ff0000;
  border-color: #008000;
}
.btn-custom .badge {
  color: #ff0000;
  background-color: #0000ff;
}

end update

To generate a custom button:

.btn-custom {
    .btn-pseudo-states(@yourColor, @yourColorDarker);
 }

The above will generate the following css:

.btn-custom {
  background-color: #1dcc00;
  border-color: #1dcc00;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active {
  background-color: #19b300;
  border-color: #169900;
}
.btn-custom.disabled:hover,
.btn-custom.disabled:focus,
.btn-custom.disabled:active,
.btn-custom.disabled.active,
.btn-custom[disabled]:hover,
.btn-custom[disabled]:focus,
.btn-custom[disabled]:active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom:hover,
fieldset[disabled] .btn-custom:focus,
fieldset[disabled] .btn-custom:active,
fieldset[disabled] .btn-custom.active {
  background-color: #1dcc00;
  border-color: #1dcc00;
}

In the above #1dcc00 will be your custom color and #19b300 your darker color. In stead of the less solution you also can add this css direct to your html files (after the bootstrap css).

Or get your css code direct from Twitter's Bootstrap 3 Button Generator

Is .btn-pseudo-states in Bootcamp 3? I'm getting an "undefined" error trying to compile your above code. — ow3n, Jan 07 '14 at 19:21
you're right is has been changed. In the latest version (3.0.3) you should use `.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);`. I will update my aswer too. — Bass Jobsen, Jan 07 '14 at 20:13
As for bootstrap 4.0-alpha, the API for the button-variant mixin function has change to `@mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%))`. Please check the file at `scss/mixins/_buttons.scss` for your own bootstrap version to see if there is any future update. — lnyng, Sep 04 '17 at 00:42

score 19 · Answer 2 · edited Mar 23 '15 at 12:06

It's quite easy to do this with unprocessed css as well

CSS

.btn-purple {
    background: #9b59b6;
    border-color: #9b59b6;
}

.btn-purple:hover {
    background: #8e44ad;
    border-color: #8e44ad;
}

.btn-teal {
    background: #1abc9c;
    border-color: #1abc9c;
}

.btn-teal:hover {
    background: #16a085;
    border-color: #16a085;
 }

HTML

<button class="btn btn-purple">purple</button>

<button class="btn btn-teal">teal</button>

Fiddle at: http://jsfiddle.net/z7hV6/

score 4 · Answer 3 · answered Feb 25 '14 at 18:20

After finding this solution via google and understanding the bootstrap buttons better I found the following tool to generate different colours for bootstrap buttons.

It does mean you'll have to add this to a separate css but it's perfect for what I needed. Here's hoping it's useful to others:

http://twitterbootstrap3buttons.w3masters.nl/

score 2 · Answer 4 · answered Jul 29 '14 at 19:52

Here is a nice and easy way to style up additional Bootstrap button colors

Bootstrap Button Generator

Below is a sample of the CSS it will generate:

.btn-sample { 
  color: #ffffff; 
  background-color: #611BBD; 
  border-color: #130269; 
} 

.btn-sample:hover, 
.btn-sample:focus, 
.btn-sample:active, 
.btn-sample.active, 
.open .dropdown-toggle.btn-sample { 
  color: #ffffff; 
  background-color: #49247A; 
  border-color: #130269; 
} 

.btn-sample:active, 
.btn-sample.active, 
.open .dropdown-toggle.btn-sample { 
  background-image: none; 
} 

.btn-sample.disabled, 
.btn-sample[disabled], 
fieldset[disabled] .btn-sample, 
.btn-sample.disabled:hover, 
.btn-sample[disabled]:hover, 
fieldset[disabled] .btn-sample:hover, 
.btn-sample.disabled:focus, 
.btn-sample[disabled]:focus, 
fieldset[disabled] .btn-sample:focus, 
.btn-sample.disabled:active, 
.btn-sample[disabled]:active, 
fieldset[disabled] .btn-sample:active, 
.btn-sample.disabled.active, 
.btn-sample[disabled].active, 
fieldset[disabled] .btn-sample.active { 
  background-color: #611BBD; 
  border-color: #130269; 
} 

.btn-sample .badge { 
  color: #611BBD; 
  background-color: #ffffff; 
}

score 1 · Answer 5 · answered Jan 06 '14 at 22:07

I have been looking for a possible solution for quite a while to stylize bootstrap buttons. I followed the latest css style language (less http://lesscss.org/), and quite a few workarounds to customize the buttons, but none of them were useful. There are quite amazing bootstrap button generators available online such as http://www.plugolabs.com/twitter-bootstrap-button-generator/ and many more. But to my surprise meagerly one line of code in the css file worked decently well for me. (Note: Instead of "background-color", I have used "background" as parameter to specify the name of the button color. In the html code, I have used btn-custom as the class name which I have redefined in the css file.)

HTML Code

<a href="#" target="_blank" class="btn btn-custom pull-right"> 
<i class="fa fa-edit fa-lg"></i>
Create an Event
</a>

CSS Code

.btn-custom {
    background: #colorname; 
}

Your solution will give the button the background color `#colorname;` but don't handle the different states default,active (hover) and disabled. Using `background` in stead of `background-image` doesn't make any difference, see: http://stackoverflow.com/questions/10205464/whats-the-difference-between-specifying-background-vs-background-color-in — Bass Jobsen, Jan 06 '14 at 22:58

score 0 · Answer 6 · answered Oct 15 '14 at 23:29

Here's another alternative with the advantage that you can add as many "button actions" (colors) as you want. Here's short demo video: Using Unicorn-UI Buttons with Twitter Bootstrap

If you grab the library and compile yourself, you can defined as many "button actions" by editing a Sass list that looks like:

$ubtn-colors: ('primary' #1B9AF7  #FFF) ('plain' #FFF #1B9AF7) ('inverse' #222 #EEE) ('action' #A5DE37  #FFF) ('highlight' #FEAE1B #FFF)('caution' #FF4351 #FFF) ('royal' #7B72E9 #FFF) !default;

Adding as many custom types as you'd like (and of course also removing those you don't need).

Styling Twitter's Bootstrap 3.x Buttons

6 Answers6

Linked