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.


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.