Archived topic
Gradient on body only links
9 replies · Started by Dominique on January 25, 2021
Hi,
I applied a gradient on body only links using this selector:
.inside-article a:not(.button) {
/* Gradient CSS */
}
It works great the gradient applied.
The hover color does not apply anymore so I tried this:
.inside-article a:hover:not(.button){
color: #e5e4e2!important;
}
It doesn't work. Can't get the hover colour to apply.
Please advise.
Hi there,
Where can I see a link? I checked the home page and don't see one - only seeing lots of buttons.
Let me know :)
About-Us or À-Propos Contact-Us or Contact Choose your language :)
There is more then a home page to a website ;)
Hi,
Try adding this CSS.
.inside-article a:hover:not(.button) {
background: unset;
-webkit-text-fill-color: unset;
color: #e5e4e2!important;
}
Hi,
Worked like a charm !important not needed.
Thanks
Worked like a charm !important not needed.
Agreed, I just copied the property from the existing CSS. In fact, it's best practice to avoid using !important.
No problem. Glad it works for you. :D
Hi,
The website is now out of the sandbox and live attached to the domain name.
First, I would like to thank the whole team for all the above and beyond help & support that was given. With your help I was able to have the website look exactly how I wanted it. The website performs phenomenally in lighthouse web.dev 100 notes on performance, accessibility, best practices & SEO!!! The load time is 1.1 to 1.3 seconds in mobile!!! I attached in private information a link to a screenshot of the results. There is no way I could of achieved those results using Elementor with Elementor Pro. The combination of Perfmatters, WP-Rocket, GeneratePress premium with GenerateBlocks is a lean mean winning one. Keep up the great work.
Regarding gradient on links I have an issue with partial or incomplete display of the text links that was noticed on mobile only IOS devices.
Any help to resolve the issue would be appreciated.
Hi there,
thanks for the great feedback - we really appreciate it, and its great to see those page speed results !
In your CSS Rule for adding the gradient / background clip, try adding the following property:
-webkit-box-decoration-break: clone;
It should stop the weird line breakage that is occurring.
Hi,
Never would of found that one.
Worked like a charm.
As always ;)
Thank you.
Glad to hear that!