Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap button on click showing default colour

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;  } 
like image 291
user3312792 Avatar asked Jul 13 '15 08:07

user3312792


People also ask

How do I change the default button color in Bootstrap?

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.

What is the color of primary button in Bootstrap?

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.


2 Answers

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.

like image 119
Guy Avatar answered Oct 30 '22 15:10

Guy


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; } 
like image 40
xxxbence Avatar answered Oct 30 '22 15:10

xxxbence