Bootstrap button focus

Question

I styled my button everything is cool but can't change the blue color on click.

<button type="button" class="btn btn-primary">Log In</button>

.btn.btn-primary:focus {
  background-color: and here color
} 

doesn't work

Answer 1

The hover state has priority over the active or focus. You can see it on the snippet as both element has a color change for active, but only on for hover.

.btn:active { background-color: red }
.btn.btn-primary:hover { background-color: green }

<button type="button" class="btn btn-primary">With hover</button>
<button type="button" class="btn btn-secondary">No hover</button>

To solve this, you need to specify the order, and be clear in your selectors. hover selector needs to be before the active selector.

.btn.btn-primary:hover { background-color: green }
.btn.btn-primary:active { background-color: red }

<button type="button" class="btn btn-primary">Button</button>