bootstrap button on click showing default colour

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

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