CODEWITHSUNDEEP
csshtmltwitter-bootstrap
K4NU 420
K4NU 420

Reputation: 53

Bootstrap button focus

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

Upvotes: 4

Views: 19794

Answers (3)

S1awek
S1awek

Reputation: 1783

Use

.btn:active {
  background-color: red;
}

Upvotes: 0

Chase Ingebritson
Chase Ingebritson

Reputation: 1579

You need to override each pseudo-selector for the button that you want to change.

If you want to avoid using !important, then you are going to need to override a couple more selectors that Bootstraps sets. I commented these out in the snippet for simplicity's sake.

.btn.btn-primary {
  background-color: orange
}

.btn.btn-primary:active,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background-color: orange !important;
}

/*
.btn-primary:not(:disabled):not(.disabled).active, 
.btn-primary:not(:disabled):not(.disabled):active, 
.show > .btn-primary.dropdown-toggle {
  background-color: orange;
}
*/
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

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

Upvotes: 1

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

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>

Upvotes: 4

Related Questions