Topic: Primary button : background color on hover ?!

Jul Neel free asked 6 years ago

Hi everyone ! On the navbar, I created a primary-button. This button's background has (like I would expect) the primary color I set in the bootstrap variables.scss file. But on hover, it has a blue color... I don't know if it's a bug or if I misunderstood something...

Kamil Paciepnik free answered 6 years ago

Josip accurately described why this would work - thanks Josip. In addition, the design button is compatible with Material Design and has a wave effect. Regards

Josip Tomašev priority answered 6 years ago

Because of need to change the default value for :hover status of button in mdb.css

.btn-primary {
  background: #4285F4; }
  .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #5a95f5 !important; } {
    background-color: #0b51c5 !important; }
You have in SASS _buttons.scss:

.btn-primary {
    background: $primary-color;
    &:active {
        background-color: lighten( $primary-color, 5%)!important;
    &.active {
        background-color: darken( $primary-color, 20%)!important;
        @extend .z-depth-1-half;
The first variable in _variables.scss ($primary-color) can be changed in desired color and it will work

Jul Neel free answered 6 years ago

That's what I've done... But I wonder why "primary-btn" pick the "brand-primary" color in normal state and pick this blue color on :hover...

Kamil Paciepnik free answered 6 years ago

The code you provided is correct. If you want other color when button is hover, try this code:
.btn-primary:hover {
    background-color: red !important;

Jul Neel free answered 6 years ago

Hi Kamil,
<form role="search" method="get" " class="searchform form-inline my-2 my-lg-0" action="<?php echo home_url( '/' ); ?>">
        <input class="form-control mr-sm-2" type="search" id="s" name="s" value="" placeholder="<?php _e('Search for','sage'); ?>" />
        <button type="submit" class="btn btn-primary my-0" id="searchsubmit" ><i class="fa fa-search" aria-hidden="true"></i></button>
Thanks !

Kamil Paciepnik free answered 6 years ago

Hi Jul Neel, could you share me your code? Regards

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No