Apply Custom CSS to Text Links but Not Buttons

Hi Sasha,

Try change the selectors to entry-content a:not(.gb-button) and entry-content a:not(.gb-button):hover.

Let me know :)

Hi Ying – 

Thanks for your reply!

Unfortunately, that still changed the styling on my body & image caption links too.

So strange. Any other ideas? Thanks!!

Hi Sasha,

One good way to assure that the CSS only applies to your intended elements is to add a custom CSS class.

For instance you can try adding with-link class and use this as the selector.

See this for reference: https://share.getcloudapp.com/kpu4q6Do

Then, you code would be

.with-link a {
	color: black;
	font-weight: 700;
	box-shadow: inset 0 -0.5em #A3E4DA;
	transition: box-shadow 0.2s ease-in;
}

.with-link a:hover {
	box-shadow: inset 0 -1em #A3E4DA;
}

Alternatively, I can see that the your site's page, the intended target links are inside paragraph tags. With that said, you can also try this CSS if you wish to solely affect links inside paragraphs.

.entry-content p a {
	color: black;
	font-weight: 700;
	box-shadow: inset 0 -0.5em #A3E4DA;
	transition: box-shadow 0.2s ease-in;
}

.entry-content p a:hover {
	box-shadow: inset 0 -1em #A3E4DA;
}

Hope this helps! :)

Thanks Fernando.

I tried the .entry-content p a selectors & it broke the link styles in my body text and image captions.

Regarding using a custom CSS class for every link, that would be pretty time consuming to update site-wide (I want all text links in posts across the site to have this style), and I'm not super comfortable with search/replace.

Is there a reason why excluding the buttons with CSS isn't working? That would be the most elegant solution, if we can get it to work!

If you wish to apply it to every link except GenerateBlock Buttons, then Ying’s code should work. Specifically:

.entry-content a:not(.gb-button) {
	color: black;
	font-weight: 700;
	box-shadow: inset 0 -0.5em #A3E4DA;
	transition: box-shadow 0.2s ease-in;
}

.entry-content a:not(.gb-button):hover {
	box-shadow: inset 0 -1em #A3E4DA;
}

Can you send a screenshot of a specific element the code is being applied to which it should be?

Hope to hear from you soon! :)

Thank you Fernando & Ying!

Not sure what happened the first time I tried to use the .entry-content a:not(.gb-button) selector, but Ying's original code is working now :)

Glad to hear that, it might've been some caching issue :)