Moving elements on hover pattern

I like elements that move on hover to convey interactivity. A problem with this pattern is “flickering” that can happen when hovering over the space left behind.

First lets make the button move up on hover.

button:hover {
  transform: translateY(-0.2rem);
}

Without any other additions we will end up with the mentioned “flickering” when hovering over the space left behind.

To improve this we could add an element to fill in the space left behind.

button:hover::after {
  display: block;
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* Fill up the space left behind (+ a little extra) */
  height: 0.4rem;
}

Full example #

Here is a full example on Codepen with both buttons