Hi

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

Thanks

Kaz