Using Bootstrap Button to Change Button Color

Question

I use RoR to create a website for one month. This is the code from the styles.css.scss sheet. He uses a bootstrap. I'm not sure why, but the color of the button does not change, despite the $ btnPrimaryBackground: green text. Does anyone have any ideas or thoughts on why the color of the button does not change? Thanks.

$baseFontFamily: Oxygen; @import url(http://fonts.googleapis.com/css?family=Oxygen); $navbarBackgroundHighlight: white; $navbarBackground: white; $btnPrimaryBackground: green; @import 'bootstrap'; body{ padding-top: 60px; } @import 'bootstrap-responsive'; .navbar-inner{ @include box-shadow(none !important); border: 0; } .footer{ margin-top: 50px; color: $grayLight; a{ color: $gray; } } 

Answer 1

If you use Bootsrap with LESS, you can simply do:

 .btn-primary { .buttonBackground(@yourColor, @yourColorDarker); //(button, hover) } 

If not, you simply override the button class that you want to change the color of:

 .btn-warning { background-color: Your color; } //button .btn-warning:hover { background-color: Your color; } //hover 

Also, since it appears, you want to change the color of the button to green, why aren't you using the .btn-success class like this:

 <%= button_tag "Hello", :class => "btn btn-success" %> 

Source: Styling Twitter Boot Buttons

Answer 2

In Bootstrap 3, buttonBackground no longer works, you should use button-variant(@color; @background; @border) as follows:

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

Answer 3

You can also make your own and inherit from .btn-default. In SCSS:

.btn-custom {@ extend.btn; @ extend.btn-default; color: # 6EA81A; }