Home>
I want to change the button active color in Bootstrap

I created an LP with Bootstrap (ver.4.3.1), but I want to change the color of the button that turned blue with btn-primary to purple when using: hover or: active. Only is applied and the active color remains blue. Why?

Is there a way to describe hover and active in one place instead of separately?

Thanks.

Applicable source code

  
    
       If i build it ... 
      <br>
       Learn More 
    
    
      
    
  
. btn-primary {
  background-color: # 6648b1;
  border: 1px solid # 6648b1;
}
.btn-primary: hover {
  background-color: # 563d7c;
  border: 1px solid # 563d7c;
}
.btn-primary: active {
  background-color: # 563d7c;
  border: 1px solid # 563d7c;
}
  • Answer # 1

    This is because the

    Bootstrap style conflicts with theactivepseudo-class style, and the Bootstrap style has been applied. The solution could be to use the! Importantrule, or to have a greater level of detail than Bootstrap's style. You can also use the selector list to organize the styles (operation check link).

    . btn-primary {
      background-color: # 6648b1;
      border: 1px solid # 6648b1;
    }
    .btn-primary: hover, .btn-primary: not (: disabled): not (.disabled): active {
      background-color: # 563d7c;
      border: 1px solid # 563d7c;
    }


    Or (operation check link):

    . btn-primary {
      background-color: # 6648b1;
      border: 1px solid # 6648b1;
    }
    .btn-primary: hover, .btn-primary: active {
      background-color: # 563d7c! important;
      border: 1px solid # 563d7c! important;
    }