Bootstrap button custom active color

1
votes

I'm trying to set a custom color for the active state of a bootstrap button.

HTML:

<button class="btn btn-lg btn-primary" id="addToCart" data-value={{food.name}}>Add to cart</button>

CSS:

.btn-primary {
    color: #FFFFFF;
    background-color: #43A047;
    border-color: #43A047;
}

.btn-primary:active,
.btn-primary.active {
    background-color: #43A047;
}

.btn-primary:hover {
    color: #43a047;
    background-color: #FFFFFF;
    border-color: #43a047;
}

With this code I'm able to change the color and the hover color of the button, but when I click the button the default btn-primary color remains. What am I doing wrong here?

2
csstwitter-bootstrap

2 Answers

5
votes

Twitter's Bootstrap provides a Button Generator, take a look into the generator, maybe you can change the generated CSS code to change to meet with your requirements:

http://twitterbootstrap3buttons.w3masters.nl/

0
votes

Try something like this. 

.btn.btn-primary {
    color: #FFFFFF;
    background-color: #43A047;
    border-color: #43A047;
}
.btn.btn-primary:hover {
    color: #43a047;
    background-color: #FFFFFF;
    border-color: #43a047;
}
.btn.btn-primary:focus {
    background-color: #f00;
}