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.

Answer 1

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

Answer 2

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

Answer 3

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

You can change color and see the effect in action.

Answer 4

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.

Answer 5

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>

Answer 6

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.