CODEWITHSUNDEEP
csstwitter-bootstrapsassbootstrap-4
Socrates
Socrates

Reputation: 9574

Globally set custom Bootstrap 4 button color

I am trying to set the color of Bootstrap 4 buttons. Precisely I want to change the color of btn-primary while holding a mouse click down on it. It has to be some button event I have to colorize, but it does not appear to be in hover, focus, or active.

In my tests I got the button with the class btn-primary entirely red except while clicking on it, which turns the button blue. For creating CSS I make use of Sass.

My app.scss file:

.btn-primary {
    &:hover {
        color: red;
        background-color: red;
    }
    &:focus {
        color: red;
        background-color: red;
    }
    &:active {
        color: red;
        background-color: red;
    }
}

How can I set the color of the button while clicking on it?

Upvotes: 2

Views: 2737

Answers (1)

doğukan
doğukan

Reputation: 27451

use with !important.

.btn-primary:hover {
  color: red;
  background-color: red !important;
}

.btn-primary:focus {
  color: red;
  background-color: orange !important;
}

.btn-primary:active {
  color: white;
  background-color: green !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

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

Or, without using !important:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<style>
.btn-primary:hover {
  color: white;
  background-color: red;
}

.btn-primary:focus {
  color: red;
  background-color: orange;
}

.btn-primary:not(:disabled):not(.disabled):active {
  color: white;
  background-color: green;
}
</style>
<button type="button" class="btn btn-primary">Primary</button>

Upvotes: 2

Related Questions