Fine Tune The Grid Custom CSS - Load More button text color

[UltimateNewLife]

I would like my blue “load more” button with white text to become a white button with grey text upon hover.

Im finding it VERY difficult to change the text color. Under button or hover “color: #xxxxx” doesn’t change a thing, with or without important.

In the grid’s custom css I have added:

.tg-ajax-button span {
color: rgb(255,255,255) !important;
}
.tg-ajax-button {
display: inline-block;
position: relative;
border: 1px solid;
cursor: pointer;
font-weight: inherit;
line-height: 1.3;
text-align: center;
vertical-align: middle;
transition: all 0.15s linear;
border-color: rgb(84, 181, 230) !important;
background-color: rgb(84, 181, 230);
border-width: 3px;
text-transform: uppercase;
padding: 0.579em 1.105em 0.842em;
font-size: 19px;
outline: 0 !important;
}

.tg-ajax-button:hover {
color: rgb(68, 68, 75) !important;
border-color: rgb(10, 139, 199) !important;
margin-bottom: 0;
border-width: 3px;
text-shadow: none;
background-color: rgb(84, 181, 230);
box-shadow: none;
}

I am certainly no CSS whizz so the answer may be obvious?
I am doing a local build or otherwise would provide you the login.
Thanks
Carla

[UltimateNewLife]

FYI The change in border color upon hovering works just fine.

[rad]

Hi @UltimateNewLife,

Thanks for reaching out.

How about this?

.tg-ajax-button, .tg-ajax-button * {
color: rgb(255,255,255) !important; 
} 
.tg-ajax-button:hover, .tg-ajax-button:hover * {
color: rgb(68, 68, 75) !important;
} 

I only assume you’re directly styling the element based on your current CSS as I can’t check your site.

Thanks!