Useful CSS Trick to Keep Elements in Place on Hover

By giving elements a transparent border as a default, and changing the color of the border on hover, you can avoid moving other elements around the page when a user hovers over elements.

Example: https://codepen.io/rudimental/pen/aMZaBV

Do this:

button {
  border: 2px solid transparent;
}

button: hover {
  border-color: black;
}

Not this:

button:hover {
  3px solid black;
}

Now your other elements won’t move when a user hovers over the button.