Home>

css3 - with bootstrap: i want to change the color when active

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;
}
html5 css3 bootstrap
  • 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;
}

Related articles