What are the best practices for this?
Is it better to e.g. opt for underlining, box shadows, or a darker font / bgcolor when selected / on hover?
The reason I ask is that a client I have is asking to bold text on hover, but its causing some layout shift as the div/a the text is in will enlarge on hover.
I am trying to apply a pseudo-class to prevent layout shift but was wondering if there's other ways to show that the user is hovering over a button
It's best to show that it is a link even before you hover or click. Someone might be using a touch device, which does not have hover states.
Typically this is done by using underlined text in a different colour that stands out from the normal text.
A hover state is optional as it should be clear without it.
Instead of changing the font-weight, make the hover state with a text-shadow
Example at codepen
A pseudo-element pre-bolded but hidden and visible on hover
Source css-tricks.com
Why change something that most users are already familiar with? If you hover over any of the links/buttons on the stackexchange page, you will see that the only thing that changes is the color of the text. Depending on the website, the text could turn darker or lighter on hover, but the overall font-weight doesn't change. Changing the font weight can be common for tabs to show which tab is opened (example shown in picture), but I don't see many benefits in making the text link bold on hover alone.
Personally, I would reassess why the client wants to bold the text on hover (visibility reasons? to show that the text is clickable? is this text more important and need to be highlighted in some way?) and figure out a solution that matches the root reason why they want it bold. Often, it can be done by darkening/lightening the text or adding a background color to highlight it.
No. As you point out, the way modern browsers implement bold font, there is always a layout shift happening. Which is unfortunate, but also gives a clear answer.
Go with one of the excellent suggestions in the other replies in the thread.
If you need to argue with your client about this, maybe this helps:
For evolutionary reasons, the human brain is very, very receptive to motion. So shifting text/layout is both startling and takes attention - away - from the button. Which is the opposite of what you want. If the button is part of the sales funnel, this may actually loose business.
Good luck :)
