Change Link Button Color CSS for active/hover

App Development
1

Hi all-

Something must have changed in an update to the platform because a previous simple CSS change that allowed different colors for Link Buttons doesn’t work now. I have it working on an old application but am creating a new one and it doesn’t work.

ATTEMPTED CUSTOM CSS

#x_element_page_38_41 > button {
    font-size:14px;
    width:100%;
    background-color: #5c8400;
    border-color: #5c8400;
}
#x_element_page_38_41 > button:hover {
    background-color: #84bd00;
    border-color: #84bd00;
}

It doesn’t appear that the platform is recognizing the simple update and the Bootstrap CSS is has total override on the formatting.

Any ideas what I can try to change the color for active/hover of a Link Button?

Thanks,
Adam

2

Hi Adam,

As you might already know im not a coder so i apologise if this is a silly question… but shouldnt your codes be written in a ‘class’ so you can apply it to all link buttons instead of coding each one… # is element id … right…? im learning.

anyway… will this help?

3

Excellent point @Shumon, unless @SafetyUniversity is only applying this style to a particular component.

Adam, we haven’t changed anything that would cause this not to work but I’m none of the standard Tadabase buttons use the the <button> tag (as far I can remember).

Is this a button within a component or a custom HTML button?

Easiest thing to test is just add !important after each color code and before the semi-colon

4

I found this made a difference for me on my css codes. Try adding this to first line:

.style,

x_element_page_38_41 > button {
font-size:14px;
width:100%;
background-color: #5c8400;
border-color: #5c8400;
}
#x_element_page_38_41 > button:hover {
background-color: #84bd00;
border-color: #84bd00;
}

5

I found the overriding CSS piece that was the culprit. In .btn-primary there is a background-image class that was not being overridding by the custom CSS. I added the following into the page CSS and it works just fine.

.btn-primary {
    background-image:none !important;
}

Hope this helps others,
Adam