Home › Forums › Support › Class needed for all links except for buttons, menu items, archive-headlines etc
- This topic has 8 replies, 3 voices, and was last updated 2 years, 3 months ago by Elvin.
-
AuthorPosts
-
December 7, 2021 at 1:35 am #2040862Sascha
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,
SaschaDecember 7, 2021 at 2:43 am #2040919ElvinStaffCustomer SupportHi 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. π
December 7, 2021 at 3:21 pm #2041777SaschaThanks, 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
SaschaDecember 7, 2021 at 3:48 pm #2041796YingStaffCustomer SupportHi Sascha,
Can you try using
.inside-article a:not(.gb-button):not(.button):not(.entry-title a)
instead ofa
?December 8, 2021 at 12:44 am #2042050SaschaThanks. 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.
December 8, 2021 at 12:53 am #2042064ElvinStaffCustomer SupportThe :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; }
January 23, 2022 at 2:38 am #2090441SaschaHello,
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,
SaschaJanuary 23, 2022 at 6:34 am #2090576SaschaPlease ignore my last reply, I have realized that it’s using the color which is defined in Colors > Body > Link.
Problem solved!
January 23, 2022 at 9:13 pm #2091257ElvinStaffCustomer SupportThanks for letting us know. Glad you got it sorted. π
-
AuthorPosts
- You must be logged in to reply to this topic.