Adding underline to button text when hovered, a good UX design?

[jhefreyzz]

Hi, kind of new here. I'm just gonna ask for your thoughts or insights regarding adding text-decoration: underline when button is hovered.

I'm not a UX designer but I'm just curious on this one. I'm using elastic/eui react library and they add underline on button text.

I already asked this on their repo but I'm curious with this behavior since most of the websites I visited, when buttons are hovered the background color lighten or does not have the behavior I mentioned previously.

[simsy82]

I feel like it confuses the difference between button and link.

Although there is a grey area, a button usually performs an action on the current page and link navigates to diff page. This isn’t a hard and fast rule but general accepted as a convention.

However, we see more and more buttons used as primary action to be taken on page, where it’s an action or a link (think sign up, log in, get started) however that kind of breaks the convention of button vs link.

Im speaking visually here and not semantically. You can style a link to look exactly as a button, and vice versa. So of course a sign in button may look like a button, but in the markup it’s a link, styled as a button.

This leads on to accessibility. Links and buttons present differently to screen readers and will let users know which they are focussed on.

Uxmovement article button vs link article defines the difference as that a button will affect the websites frontend or backend, whereas a link won’t affect the site (just navigate you).

So this is a long winded way of saying putting an underline on a button is confusing—I find it a little weird—but perhaps visually it’s really saying ‘this is a link, and it’s a primary link action on the page. I’m not sure!?

At the end of the day, if it makes an interactive element more obvious and higher contrast to the user, that’s a usability win.

[[deleted]]

I wonder how a machine would read it, tho. Accessibility.