bootstrap button on click showing default colour

Question

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 butt

Answer 1

if you want remove the box-shadow just add box-shadown:none and make it important or if you want add box-shadows just add color values.

.btn-primary:not(:disabled):not(.disabled):active{
    color: #fff;
    background-color: #5b5fc6;
    border-color: #5b5fc6;
    box-shadow: none !important;
}

or

.btn-primary:not(:disabled):not(.disabled):active{
        color: #fff;
        background-color: #5b5fc6;
        border-color: #5b5fc6;
        box-shadow: 0 0 0 0.2rem #c9cbfa !important
    }

Answer 2

Some inspiration from the bootstrap source for overriding these various button states where $off-white and $brand-black are defined by us:

.btn-success {
  &:hover,
  &:focus,
  &.focus {
    color: $off-white;
    background-color: $brand-black;
  }

  &:active,
  &.active,
  &.disabled,
  &:disabled {
    color: $off-white;
    background-color: $brand-black;

    &:focus,
    &.focus {
      color: $off-white;
      background-color: $brand-black;
    }
  }
}

Answer 3

That button press animation of the default color is due to the background image. Use this for each named style (btn-default, btn-success, etc):

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}

Answer 4

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;
}

Answer 5

Just add the following code in your CSS

.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover
{
color: #fff;
background-color: #161617; 
border-color: #494F57; 
}

Answer 6

If you are working on a personal project, and not with a team, it is worth noting that you can override pseudo class styles simply by applying "!important" to the same style declarations on the class:

.btn-success { color: #ffffff !important; background-color: #161617 !important; border-color: #494F57 !important; }

Generally, it's a good idea to stay away from !important because this will override any and all color, background-color and border-color style declarations on the btn-success class (unless you override the style declarations again with !important later in your style sheet although that's ridiculous).

If the goal is the smallest file size possible though and you are using this class everywhere in the same way - meaning no inline styles - then this may be your best option.

Alternatively, but using the same thinking, you may try naming a new custom class something like .btn-success-important, and only apply it after btn-success where you need to use the override.

There is one catch though: If you are combining .btn-success or your .btn-success-important with any other Bootstrap .btn-group, !important will override any pseudo class style declared within. In this case you may be better off with Guy's answer (the custom class without !important style declarations).