underline hover script to use for buttons

  • Resolved memakossa

    (@memakossa)


    3 years, 10 months ago

    HI, I would like to extend the hover underline effect in the navigation menu to my buttons on the page, just to make it one style. I was trying to target/search the scriptcode. How to isolate the functionality that causes the effect? and then How to add the JSlibrary functionality to the button? If someone could help me out here that would be great.. Kind Regards Debbie

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Vytis

    (@bvytis)

    3 years, 10 months ago

    Hi @memakossa,

    If I understand correctly you want the underline effect so that can be achieved with pure CSS just by targeting your buttons or classes of them something like that (this will add underline effect and color on hover of any button):

    button:hover {
  text-decoration: underline;
  color: #000; /*black color - change to desired */
}

    I hope that helps!

    Thread Starter memakossa

    (@memakossa)

    3 years, 9 months ago

    Hi Vytis,

    Thanks for your reply..Sorry, I am a bit late on reply I’ve my site live now it’s a neve theme I’ve chosen: http://memakossa.com/
    Seeing the feature is easier than describing. I would like to extend the nav menu underline effect also on the normal links( could be made buttons) . It’s not a major deal but kinda looks more smart..I’ve not been able to isolate it in code, but if anyone has a idea it would be much appreciated, kinde regards Debbie

    Vytis

    (@bvytis)

    3 years, 9 months ago

    Hi @memakossa,

    This is achievable with custom CSS again, so you need to use Additional CSS section of customizer and add the necessary code there.

    Here are some great examples of animated underlines that could be used on your website, for example, https://speckyboy.com/underline-text-effects-css/

    Then, you can target all the <a> elements for your #content like:

    #content a

    And use those styles.

    This is a great guide about how you could inspect elements in the browser to know what to target and make changes: https://developers.google.com/web/tools/chrome-devtools/css

    I hope that helps and thank you for choosing Neve! 🙂

    • This reply was modified 3 years, 9 months ago by Vytis.
    Thread Starter memakossa

    (@memakossa)

    3 years, 9 months ago

    Thanks a lot! I’ve copied the text-effect that was animated from https://speckyboy.com/underline-text-effects-css/, very useful site.

    I needed to do a little backward engineering cause the code was in sass and the nested style syntax gave an error in the additional css section, but I am pleased with the result. Thanks so much for the tips,

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘underline hover script to use for buttons’ is closed to new replies.

Tags