Styling twitter bootstrap buttons

Question

Twitter-Bootstrap buttons are awesomely beautiful. Try them out by scrolling over them

But they are limited in colors.

Is there any way I could change the base color of the button while keeping the beautiful hover-over effect that bootstrap has made so beautiful and effortless?

I am completely unaware of what the css/javascript looks like that twitter uses to maintain those effects.

Lysimeter

Find and edit the less definitions of the buttons. Then recompile the CSS with lessc. Don't edit the CSS files directly! It's not maintainable. – Generic

Answer 1

Basically, the buttons in Twitter Bootstrap are controlled in CSS by ".btn{}". What you have to do is go to the CSS file and find where it says "btn" and change the color settings. However, it's not as simple as just doing that since you also have to change what color the button changes into when you highlight it, etc. To do THAT, you have to look for other tags in CSS like ".btn:hover{}", etc.

Changing it requires changing of the CSS. Here is a quick link to that file:

https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

Baseline

This isn't a particularly beautiful solution. Please use the other solutions, which are based on LESS. Or customize bootstrap via the variable editor on their website. – Action

just override it... loading your css in the end can help you to solve the problem .. using same calss of bootstrap – Denationalize

Yeah, I would definitely be against modifying the bootstrap.css. Like Jaimin said, just override it. – Nobell

Answer 2

I found the simplest way is to put this in your overrides. Sorry for my unimaginative color choice

Bootstrap 4-Alpha SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

Bootstrap 4 Alpha SASS Example

Bootstrap 3 LESS

.my-btn {
  //.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
  .button-variant(red; white; blue);
}

Bootstrap 3 LESS Example

Bootstrap 3 SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

Bootstrap 3 SASS Example

Bootstrap 2.3 LESS

.btn-primary {
  //.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  .buttonBackground(red, white);
}

Bootstrap 2.3 LESS Example

Bootstrap 2.3 SASS

.btn-primary {
  //@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); 
  @include buttonBackground(red, white); 
}

It will take care of the hover/actives for you

From the comments, if you want to lighten the button instead of darken when using black (or just want to inverse) you need to extend the class a bit further like so:

Bootstrap 3 SASS Ligthen

.my-btn {
  // @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  $color: #fff;
  $background: #000;
  $border: #333;
  @include button-variant($color, $background, $border);
  // override the default darkening with lightening
  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: lighten($background, 20%); //10% default
    border-color: lighten($border, 22%); // 12% default
  }
}

Bootstrap 3 SASS Lighten Example

Zwieback

How would you translate this into scss? – Savdeep

Then run lessc to compile your changes to CSS. – Generic

Dreyfuzz I do not use scss but looking at the 3rd party sass bootstraps it seems you would do .btn-primary {@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); } ` changing your variables appropriately (sorry for terrible formatting) – Zwieback

I get .buttonBackground is undefined in main.less do I need to include anything in my less? – Alinaaline

@hmajumdar make sure you have the bootstrap less or sass framework imported first, then add the overrides after. If you are getting buttonBackground undefined you either don't have the framework or are using the old 2.3 and should switch to button-variant for v3. I added some codepen examples with the bare minimum files to include (tho likely you want more than just those) – Zwieback

@Andre hover does actually work, you just can't see it because black is as dark as it can go. If you look at the source code github.com/twbs/bootstrap/blob/master/less/mixins/buttons.less you will see they are applying a darken method to all of your colors. Since you are picking black it can't darken it anymore. Pick a lighter color or check out this version where I flip it so it lightens instead of darkens: codepen.io/chrisan/pen/EaLaBe – Zwieback

Does anyone else just set the value of $brand-warning; the variable seen in Bootstrap 3's official SASS code which is the input for button-variant (I believe)? This works for me. Seems to be the way they intended... And if $brand-warning change would affect other areas you don't want; just c hange $btn-default-color or other variables which only affect buttons – Monarski

Answer 3

You can overwrite the colors in your css, for example for Danger button:

.btn-danger { border-color: #[insert color here]; background-color: #[insert color here];

.btn-danger:hover { border-color: #[insert color here]; background-color: #[insert color here]; }

Jitney

I think you need to style :focus and :active too, or otherwise you sometimes get weird colours on clicks/drags... – Detestation

Simple, I like it. – Kenlay

For those who found this via searching, and you're getting a default color when you click and drag off a button, you need .btn-primary:active:focus { in order to select and override that case – Tenderfoot

Answer 4

Here is a good resource: http://charliepark.org/bootstrap_buttons/

You can change color and see the effect in action.

Germaun

This is a configurator. It's easy if you are in a hurry creating a prototype for the customer. However not maintainable in the long term. What if the configurator disappears? Therefore for the real thing, lessc is a better solution. – Generic

Love this solution, though I wish there was a way to enter rgb/rgba to get the exact colors. – Gaelic

@Generic less is great if you've already got that step going, but this "configurator" does everything needed to generate css. Drop it in and go. You won't need the configurator after that. – Elielia

Answer 5

If you are already loading your own custom CSS file after loading bootstrap.css (version 3) you can add these 2 CSS styles to your custom.css and they will override the bootstrap defaults for the default button style.

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {

  background-color: #A6A8C1;
  border-color: #31347B;
 }

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

Dominiquedominium

Answer 6

Instead of changing CSS values one by one I would suggest to use LESS. Bootstrap has LESS version on Github: https://github.com/twbs/bootstrap

LESS allows you to define variables to change colors which makes it so much more convenient. Define color once and LESS compiles CSS file that changes the values globally. Saves time and effort.

Davidson

Answer 7

In order to completely override the bootstrap button styles, you need to override a list of properties. See the below example.

    .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, 
    .btn-primary:active, .btn-primary.active, .btn-primary:visited,
    .btn-primary:active:hover, .btn-primary.active:hover{
        background-color: #F19425;
        color:#fff;
        border: none;
        outline: none;
    }

If you don't use all the listed styles then you will see the default styles at performing actions on button. For example once you click the button and remove mouse pointer from button, you will see the default color visible. Or keep the button pressed you will see default colors. So, I have listed all the pseudo-styles that are to be overridden.

Extracellular

this method is great. it's second only to the LESS bootstrap customization – Kirsch

Answer 8

For Bootstrap for Sass override it's

.btn-default {

    @include button-variant($color, $background, $border);

}

You can see the source for it here: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

Bromeosin

Answer 9

Or try http://twitterbootstrapbuttons.w3masters.nl/. It creates css for buttons based on html color input. Add the css after the bootstrap css. It provides three styles of buttons (light, dark and spin).

Lordship

This is a configurator (sort of). It's quite easy if you are in a hurry creating a prototype for the customer. However not maintainable in the long term. What if the configurator disappears? Therefore for the real thing, lessc is a better solution. – Generic

Answer 10

Here is a very easy and eficient way: add in your CSS your class with the colors you want to apply to your button:

.my-btn{
    background: #0099cc;
    color: #ffffff;
}
.my-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}

and add the style to your bootstrap button or link:

<a href="xxx" class="btn btn-info my-btn">aaa</a>

Unrepair

Answer 11

In Twitter Bootstrap bootstrap 3.0.0, Twitter button is flat. You can customize it from http://getbootstrap.com/customize. Button color, border radious etc.

Also you can find the HTML code and others functionality http://twitterbootstrap.org/bootstrap-css-buttons.

Bootstrap 2.3.2 button is gradient but 3.0.0 ( new release ) flat and looks more cool.

and also you can find to customize the entire bootstrap looks and style form this resources: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

Henden

Answer 12

I know this is an older thread, but just to add another perspective. I'd assert that using overrides is really a bit of a code smell and will quickly get out of hand on larger projects. Today you're overriding Buttons, tomorrow Modals, the next day it Dropdowns, etc., etc.

I'd advise to try possibly commenting out the include for buttons.less and either define my own, or, find another Buttons library that's more suitable to my project. Shameless plug: here's an example of how easy it is to mix our Buttons library with TB: Using Buttons with Twitter Bootstrap. In practice, again, you'd likely want to remove the buttons.less include altogether to improve performance but this shows how you can make things look a bit less "generic". I haven't done this exercise yet myself but I'd imagine you could start by simply commenting out lines like:

https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17

And then recompiling using `lessc using one of your own buttons modules. That way you get the battle tested core of TB but can still customize things without resorting to major overrides. There's absolutely no reason not to use only parts of a library like Bootstrap. Of course the same applies to the Sass version of TB

Jung

Answer 13

You can change background-color and use !important;

.btn-primary {
  background-color: #003c79 !important;
  border-color: #15548b !important;
  color: #fff;
}

.btn-primary:hover {
  background-color: #4289c6 !important;
  border-color: #3877ae !important;
  color: #fff;
}

.btn-primary.focus, .btn-primary:focus {
   background-color: #4289c6 !important;
   border-color: #3877ae !important;
   color: #fff;
}

Satsuma

Answer 14

For Bootstrap (at least for version 3.1.1) and LESS, you can use this:

.btn-my-custom {
    .button-variant(@color; @background; @border)
}

This is defined in bootstrap/less/buttons.less.

Bedroll