Topic: Button color issue

kaz priority asked 4 years ago


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


Marta Wierzbicka staff 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

kaz 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.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags