Change color of waves effect on button

MDB SupportCategory: MDB jQueryChange color of waves effect on button
caliph007 asked 6 months ago in MDB pro, version:4

<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?

2 Answers
Marta Szymanska answered 6 months 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 replied 6 months ago

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

Marta Szymanska answered 6 months 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, .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