Say, for example, you have a button where you wish the text to become bold on hover. However, as you hover, the button becomes slightly wider – as the component expands to fit the larger text.

One method of avoiding this is to apply a shadow to the text on hover – which does not affect the dimensions of the button.

One thing to note, depending on the font size of the component or just your own personal preference, is that this technique may make the individual letters look very close to each other.

One way to dodge this is to add more spacing between the letters pre-hover, like so: