Changing color of bootstrap button

Question

This is a stupid question, because I feel I should know the answer and thought my code would have done the job.

But I'm using bootstrap and I'm attempting to change the btn btn-primary class from the default blue to something else.

Here is my html:

<input type="text" class="form-control" placeholder="Search by user name, member type, genre...">
                         <span class="input-group-btn">
                             <button class="btn btn-primary" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
                         </span>

And my CSS:

.btn btn-primary:hover,
.btn btn-primary:focus,
.btn btn-primary:active,
.btn btn-primary.active {
  color: #ffffff;
  background-color: pink;
  border-color: pink;
}

But it still looks like this:

Answer 1

Be sure your override is loading AFTER the default bootstrap, or if you're using npm and compiling your own, be sure that your variable overrides are placed after the bootstrap defaults

in the bootstrap.css (BS4) btn-primary classes are defined as follows: (note that it is NOT necessary to preface these classes with .btn.btn-primary, just .btn-primary... The previous answer is not actually correct, but it works because of specificity. :-)

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:active, .btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: #0069d9;
  background-image: none;
  border-color: #0062cc;
}

If you fill all these out in your theme, just be sure your theme alterations load after bootstrap does.

Answer 2

Since btnshares its class with the same element named btn-primary, your CSS selectors should look like

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
  color: #ffffff;
  background-color: pink;
  border-color: pink;
}