Using Bootstrap to Change Button Color

Question

I'm using RoR to make a one-month rails website. This is the code from the styles.css.scss sheet. It utilizes bootstrap. I am unsure as to why but the button color does not change despite the $btnPrimaryBackground: green text. Does anyone have any ideas or thoughts on why the button color doesn't 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;
    }
}

score 5 · Accepted Answer · edited May 23 '17 at 12:17

5

If you are using Bootsrap with LESS, you can simply do:

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

If not then you simply override the button class which you want to change color:

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

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

Furthermore, since it appears you want to change the button color to green why dont you use the .btn-success class like so:

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

Source: Styling twitter bootstrap buttons

edited May 23 '17 at 12:17

Community

1
1

answered Jul 31 '13 at 01:27

amb110395

1,545
13
16

I apologize- how would I implement this code? I am a beginner – sgx Jul 31 '13 at 14:49
Sincerest apologies - I'm not sure how to implement that into the code I posted... – sgx Jul 31 '13 at 19:46
Well, you just have to paste the button_tag code in whatever view you want it to be. – amb110395 Jul 31 '13 at 19:54
Also what is the difference bw the button code you gave and the one I used (i.e. one is class:, while the other is :class)? Thanks again! – sgx Jul 31 '13 at 20:12
I don't see where you used class: but anyways it is a basically two different ways to give a symbol a value. The one is used uses the hashrocket syntax which is :symbol => value while the one you mentioned simply uses this syntax symbol: value. Anyways, if my post helped you don't forget to mark it as the answer. Good luck! – amb110395 Jul 31 '13 at 20:26
I'm not sure what happened, but I just re-typed my original code and the button is showing up green now! Although, trying out your suggestions did the same effect and helped me get a better feel for how to change up some of the settings. – sgx Jul 31 '13 at 20:57
That's strange... Anyways, I'm glad I could help. – amb110395 Jul 31 '13 at 20:59
One thing important - also add change the `.border-color` attribute, or the button keeps it's original border color. – Tom Granot Apr 06 '14 at 16:36

score 2 · Answer 2 · answered May 28 '14 at 11:14

2

In Bootstrap 3 buttonBackground doesn't work anymore, you have to use button-variant(@color; @background; @border) like this:

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

answered May 28 '14 at 11:14

Eric Marcos

2,637
2
14
12

score 0 · Answer 3 · answered Mar 23 '15 at 18:44

0

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

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

answered Mar 23 '15 at 18:44

Mike

439
1
6
10

Using Bootstrap to Change Button Color

3 Answers3