Change color of waves effect on button

Topic: Change color of waves effect on button

caliph007 pro asked 7 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?

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

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:

<code>.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;
}</code>

Best,

Marta

Please insert min. 20 characters.

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

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

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 7 years ago

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

caliph007

Pro User 0Support score
3Questions 0Answers 0Snippets