Topic: Change color of waves effect on button

caliph007 pro asked 6 years ago

<button type="button" class="btn btn-outline-success btn-rounded waves-effect btn-sm">Show Menu</button> .btn-outline-success { border-color: $colorMain; color: $colorMain!important; text-transform: none; } .btn-outline-success:hover { border-color: $colorMain; color: $colorMain!important; text-transform: none; } I am using a custom color for the outline. But on Button click the background flashes shortly (click effect). How can I change the color of the click effect?

Marta Wierzbicka staff answered 6 years ago

Hi, we solved this problem in the newest update of MDB we are working now and it will be available soon, but if you want this now you can copy and paste this code below to your CSS: .show > .btn-outline-success.dropdown-toggle, .btn-outline-success:not([disabled]):not(.disabled):active:focus,[disabled]):not(.disabled):focus, .show > .btn-outline-success.dropdown-toggle:focus, .btn-info:focus, .btn-info.focus, .btn-info:not([disabled]):not(.disabled):active,[disabled]):not(.disabled) { box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15); } .btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active, .btn-outline-success:active:focus, { background-color: transparent; color: #00C851; border-color: #00C851; } .btn-outline-success:not([disabled]):not(.disabled):active, .btn-outline-success:not([disabled]):not(.disabled).active, .show > .btn-outline-success.dropdown-toggle { background-color: transparent !important; border-color: #00C851 !important; } Best, Marta

Marta Wierzbicka staff answered 6 years ago

Hi, I'm not sure what you mean. In .btn-success you don't want to have a green color of the background on click? Best, Marta

caliph007 pro commented 6 years ago

In .btn-outline-success I dont want to have a green color of the background on click.

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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No