Site logo

Archived topic

link hovering gradient colour

3 replies · Started by Sanu Kumar on November 26, 2019

Viewing posts 1–4 of 4

.entry-content a:not(.button):focus, a:not(.button):hover,
li:not(.main-navigation):hover {
background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#da1b60));
background: linear-gradient(to right,#ff8a00,#da1b60);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
text-shadow: none;
text-decoration: underline;
}

This code is not working properly.

I want these effects only on H1 and sidebar.

Hi there,

Currently, all styles are coming from Elementor on your pages.

Have you checked with their support to see how you can tweak the code to the desired result?

It is not working even when the Elementor was not using.

Hi there,

not sure about the H1 as this is not a link and only used in the single post.
But this CSS will apply to the post titles in the blog and any links within a list inside the sidebar:

.elementor-posts .elementor-post__card .elementor-post__title:hover, .sidebar ul li:hover a {
    background: -webkit-gradient(linear,left top,right top,from(#ff8a00),to(#da1b60));
    background: linear-gradient(to right,#ff8a00,#da1b60);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-shadow: none;
    text-decoration: underline;
}
This archived topic is closed to new replies.