Question

I’m using Twitter Bootstrap for a Rails 3.2.3 project and I’m importing each stylesheet in my application.css.scss file. I’m customizing a page in the static folder (with a render file that’s in a different folder) with the static.css.scss file that is above bootstrap files in the application file. I’m trying to make the button different from the normal btn class. My code is:

.btn.signup {
    margin-top: 10px;
    font-size: 18px;
    padding: 10px 48px 10px;
    background-color: rgb(255, 138, 22);
}

.btn.signup:hover {
    margin-top: 10px;
    font-size: 18px;
    padding: 10px 48px 10px;
    background-color: rgb(255, 138, 22);
}

However in Firefox, the button is still grey except for the outer edges which are the correct color. When I hover over the button, the lower half is orange. Inspecting the button, it shows:

.btn.signup:hover, li.signup.buttons:hover {
    margin-top: 10px;
    font-size: 18px;
    padding: 10px 48px;
    background-color: rgb(255, 138, 22);
}

button.btn, input.btn[type="submit"] {
}

.btn:hover, li.buttons:hover {
    color: rgb(51, 51, 51);
    text-decoration: none;
    background-color: rgb(230, 230, 230);
    background-position: 0px -15px;
    -moz-transition: background-position 0.1s linear 0s;
}

.btn:hover, li.buttons:hover, .btn:active, li.buttons:active, .btn.active, li.active.buttons, .btn.disabled, li.disabled.buttons, .btn[disabled], li.buttons[disabled] {
    background-color: rgb(230, 230, 230);
}

.btn.signup, li.signup.buttons {
    margin-top: 10px;
    font-size: 18px;
    padding: 10px 48px;
    background-color: rgb(255, 138, 22);
}

How do I make it so the entire button is orange? I’ll change the hover color later but for now I want it all to be orange and not grey.

Answer 1

Not sure if you’re still looking for help on this. Oh well…I guess I’ll still pitch in my thoughts.

Do take note that the class .btn in Twitter Bootstrap actually has a background image attached to it, to generate the somewhat subtle gradient effect.

The gradient covers most of the button’s background, so your selected background colour only shows at the edges.

This gradient is also why you partially see your own background colour when you hover over the button – the -moz-transition causes that background image gradient to shift upwards (this is normally used to simulate a gradual darkening effect in the colour of the button when you hover over it). If you look closely, you can see that the top half of the button is coloured by the bottom of the gradient, and the bottom half is the background colour.

So you’ll need to define either background-image: none; in your custom class, or better yet, define your own gradient so you don’t lose that visual aesthetic. If you take the latter course of action, just remember to make the bottom colour of the gradient the same as your background-color, rgb(255, 138, 22). Otherwise, when you hover over the button, it will be quite clear where the gradient ends, and the background colour starts.