Changing Button Colour

[LeeFoster]

I am working on a template and need to change the colour of buttons. I've added the below to my user.css file but when clicked the buttons still go green.

Code: Select all

.btn-success {
    color: #fff;
    background-color: #ff8b00;
    border-color: #ff8b00;
}

[ecartz]

Try changing the :focus or :visited pseudo-class versions. E.g. .btn-success:focus

More discussion: https://stackoverflow.com/a/42135352/6660678

[LeeFoster]

Try changing the :focus or :visited pseudo-class versions. E.g. .btn-success:focus

More discussion: https://stackoverflow.com/a/42135352/6660678

That article really helped, thanks

[14Steve14]

I am working on a template and need to change the colour of buttons. I've added the below to my user.css file but when clicked the buttons still go green.

Code: Select all

.btn-success {
    color: #fff;
    background-color: #ff8b00;
    border-color: #ff8b00;
}

I had a similar problem when trying to round the corners of all buttons. Some times the class is not what you think it is, and specific css needs to be added to a particular button. Most changed just using the .btn class but some did not.

[LeeFoster]

I had a similar problem when trying to round the corners of all buttons. Some times the class is not what you think it is, and specific css needs to be added to a particular button. Most changed just using the .btn class but some did not.

Had to add the below code, not as simple as I thought it would be.

Code: Select all

.btn-success:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #ff8b00;
    border-color: #ff8b00;
}

.btn-success.focus, .btn-success:focus {
    color: #fff;
    background-color: #ff8b00;
    border-color: #ff8b00;
    box-shadow: 0 0 0 0.2rem #ff8b00;
}

.btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem #ff8b00;
}

.btn-success:hover {
    color: #fff;
    background-color: #ff8b00;
    border-color: #ff8b00;
}