Button color issue

Topic: Button color issue

kazosman pro premium priority asked 4 years ago


I am a MDB Pro (v4.5.0) user and I have the following button:

<a href="/free-personality-test" class="btn btn-primary btn-blue">Take The Free Test</a>

and have the following styles:

.btn-primary { background: #073860 !important; color: none !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:visited, .btn-primary:active:focus, .open>.dropdown-toggle.btn-primary { background-color: #073860 !important; color: white !important; }
.btn-primary.active { background-color: #073860 !important; }

.btn {font-size: 0.9rem; color: white!important;}

.btn-blue:hover, .btn-blue:focus, .btn-blue:active, .btn-blue.active, .btn-blue:visited, .btn-blue:active:focus {background-color: #073860!important;}

The button is fine even on hover over it but when you click it and move the mouse pointer away before unclicking the button has the primary blue color

It should stay the same dark blue (#073860).

When I click anywhere away from the button it changes back to the correct blue colour (#073860).

Which style am I missing?

Note: I don't want to mess around with compiling css files if possible.

This was working fine in MBD v3



Marta Szymanska staff pro premium answered 4 years ago

Hi, I'm not sure why you have two colors classes on one button? You should use only one. Anyway, there is an issue with a button on :focus state probably, when it is a link like this: /test6.html and there is no problem if it is a normal link like this: https://mdbootstrap.com. I don't have a solution for this now but we will try to fix the problem soon. Best, Marta

kazosman pro premium priority commented 4 years ago

Hi, Thank you and thanks to Ollie Vincent for your replies: Using the style mentioned by Ollie has fixed the issue: .btn.btn-primary.waves-effect.waves-light { background-color: #073860 !important; } Thanks again Kaz

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: Pro
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No