Archived topic
Class needed for all links except for buttons, menu items, archive-headlines etc
8 replies · Started by Sascha on December 7, 2021
Hey there
I wanted to apply an animated underline to all links of this site and have used the following css:
/* LINKS - Underline on Hover */
a {
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .4s;
}
a:hover, a:focus {
background-size: 100% 2px;
}Unfortunately, the effect is also applied to all menu-items, buttons and archive-headlines, obviously due to an incomplete classification of the css.
I have removed the above-mentioned CSS for now, but would live to add this effect back.
Could you please help with this?
By the way: Do you provide a comprehensive list of all the CSS used in GP including screenshots/examples of where they are used/applied?
Thank you in advance and kind regards,
Sascha
Hi Sascha,
We can modify the CSS a bit so it doesn't include buttons from GenerateBlocks.
Example:
a:not(.gb-button) {
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .4s;
}
a:not(.gb-button):hover, a:not(.gb-button):focus {
background-size: 100% 2px;
}If you have buttons not added by GB, can you point us to it? So we can inspect it and figure out a selector that can work for exemption. :D
Thanks, now it hay stopped underlining the buttons, which is good.
However, how to disable the effect for menu-items as well as headlines, like the ones on the blog-page?
Needed to disable the CSS and wait for your next advise before re-enabling the CSS-code again ;-)
Thanks
Sascha
Hi Sascha,
Can you try using .inside-article a:not(.gb-button):not(.button):not(.entry-title a) instead of a ?
Thanks. I have replaced the a with your code, so it was like this:
/* LINKS - Underline on Hover */
.inside-article a:not(.gb-button):not(.button):not(.entry-title a) {
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .4s;
}
.inside-article a:not(.gb-button):not(.button):not(.entry-title a) {
background-size: 100% 2px;
} But then there was no underline at all. I have also tried to disable the "Underline Links" feature in customizer, but same result.
I need the animated underline-effect only for "normal" links, also footer-links, but not on headlines, buttons or menu-items.
The :hover and :focus states where missing.
Try this:
/* LINKS - Underline on Hover */
a:not(.gb-button, .entry-title a, .button, .main-navigation li a) {
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .4s;
}
a:not(.gb-button, .entry-title a, .button, .main-navigation li a):hover,
a:not(.gb-button, .entry-title a, .button, .main-navigation li a):focus {
background-size: 100% 2px;
}Hello,
thanks for this!
now I wonder about how to use other global color for this effect?
Currently, it seems that
background-image: linear-gradient(#currentColor,currentColor)
will use the "contrast" global color. How can I use the "accent" global color instead?
Thank you in advance and kind regards,
Sascha
Please ignore my last reply, I have realized that it's using the color which is defined in Colors > Body > Link.
Problem solved!
Thanks for letting us know. Glad you got it sorted. :D
