I am trying to style the button colour with below code, the colours work until I click the button, the button shows the default colours, how do I specify the colours of the button onclick?
.btn-success { color: #ffffff; background-color: #161617; border-color: #494F57; } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success { color: #ffffff; background-color: #1F2838; border-color: #494F57; } .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success { background-image: none; } .btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled:active, .btn-success[disabled]:active, fieldset[disabled] .btn-success:active, .btn-success.disabled.active, .btn-success[disabled].active, fieldset[disabled] .btn-success.active { background-color: #161617; border-color: #494F57; } .btn-success .badge { color: #161617; background-color: #ffffff; }
Using one of the default modifier classes will change the color of the text and background color of your buttons. .Btn-danger will make the button red and font white, while . btn-warning will make the button yellow and font black, and so on.
By default, . btn-primary has white text on a blue background. Adjust the default colors using the --button-color and --button-background-color custom properties.
The :active
selector is what you need for the click.
.btn-sample:active { // click styles here }
It looks like you have that above so if you are still seeing a slightly different color it is most likely because of the box-shadow
that is also applied to the active
button state. Disable that like so:
.btn-sample:active { box-shadow: none; }
Edit: The selector that is overriding your css is actually btn-success:active:focus
. So you will need to add the following to your css:
.btn-success:active:focus { color: #ffffff; background-color: #161617; border-color: #494F57; }
Further to my comment below, you would be better off creating your own class such as btn-custom
to which you can apply your desired styles. Combining this with the existing btn
class, you can achieve your desired result with much less code as you won't need to override existing selectors.
You have to use the !important
declaration to do that correcly.
.btn-success:hover, .btn-success:active, .btn-success:focus { color: #ffffff !important; background-color: #1F2838 !important; border-color: #494F57 !important; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With