How to fix dancing button?

Question

Consider the following button style:

body {
  padding: 1rem;
}

button {
  background: blue;
  color: #fff;
  padding: 1rem;
}

button:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}

<button>kinda shaky</button>  

When I pointed at border, then the button start dancing!!

How to fix dancing button?

Answer 1

Easy fix is to use a wrapper and display it as inline-block:

body {
  padding: 1rem;
}

span {
  display: inline-block; /* "inline-flex" is ok too */
}

button {
  background: blue;
  color: #fff;
  padding: 1rem;
}

span:hover > button {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}

<span><button>kinda shaky</button></span>