Apply Custom CSS to Text Links but Not Buttons

This topic has 7 replies, 3 voices, and was last updated 4 years, 1 month ago by Ying.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
February 20, 2022 at 3:45 pm #2126791
Sasha
Hi there,

I followed the instructions on THIS thread but it broke my custom link styles for all links in the post. I want the custom link style below to apply to text links only (in body and image captions), but not the buttons in the linked post (see private info).

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

.entry-content a:hover {
	box-shadow: inset 0 -1em #A3E4DA;
}
```
February 20, 2022 at 4:12 pm #2126810

Ying
Staff
Customer Support

Hi Sasha,

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

Let me know 🙂

February 20, 2022 at 11:14 pm #2127011

Sasha

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

February 20, 2022 at 11:52 pm #2127040
Fernando
Customer Support
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! 🙂
February 20, 2022 at 11:58 pm #2127047

Sasha

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!

February 21, 2022 at 1:20 am #2127100
Fernando
Customer Support
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! 🙂
February 21, 2022 at 4:15 pm #2128273

Sasha

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 🙂

February 21, 2022 at 4:31 pm #2128277

Ying
Staff
Customer Support

Glad to hear that, it might’ve been some caching issue 🙂
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

[Resolved] Apply Custom CSS to Text Links but Not Buttons

Popular Articles

[Resolved] Apply Custom CSS to Text Links but Not Buttons

Popular Articles

Start building better websites today.