With CSS, how to prevent a <button> from jumping between state...positions?

Question

I'm working to build a button styling where when the user hovers over a button, the button moves up 2 pixels. I have that working with the following on hover:

`transform: translateY(-2px);`

The problem is, if you move your mouse right under the button, the button starts to move but and the button now bounces/jumps from normal to active causing button jumpies.

Any idea on how I can implement the button moving up 2 pixels on hover but without the jumpies when the mouse is near the edge of the button?

.ui.button {
  outline: none;
  height: 48px;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  padding-top: 12.5px;
  padding-bottom: 12.5px;
  color: #fff;
  background: green;
  border: 1.5px solid darkGreen;
  box-shadow: 0 2px rgba(6,164,105,.25);
  transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
}

.ui.primary.button:hover {
  transform: translateY(-2px);
  background: green;
  border-color: darkGreen;
  box-shadow: 0 4px rgba(6,164,105,.25);
}

<button class="ui medium primary button  button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>

Answer 1

Similarly to Temani Afif's anwser, I would use a pseudo-element that's 2px longer than the element, but switching the overflow from hidden to visible on hover.

.ui.button {
  position:relative; overflow:hidden;
  outline: none;
  height: 48px;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  padding-top: 12.5px;
  padding-bottom: 12.5px;
  color: #fff;
  background: green;
  border: 1.5px solid darkGreen;
  box-shadow: 0 2px rgba(6,164,105,.25);
  transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
}

.ui.primary.button::after{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:calc(100% + 3.5px); /* translate + bottom border height*/
}
.ui.primary.button:hover {
  overflow:visible;
  transform: translateY(-2px);
  background: green;
  border-color: darkGreen;
  box-shadow: 0 4px rgba(6,164,105,.25);
}

<button class="ui medium primary button  button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>