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

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

Answer 2

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]; }