Change color of waves effect on button

caliph007 asked 9 months 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?


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 commented 9 months ago

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


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, .btn-outline-success.active:not([disabled]):not(.disabled):focus, .show > .btn-outline-success.dropdown-toggle:focus, .btn-info:focus, .btn-info.focus, .btn-info:not([disabled]):not(.disabled):active, .btn-info.active:not([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, .btn-outline-success.active {
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


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No