Weird quick switching between normal and hover state CSS - html

Question

I just created a custom styled button with an effect when hovering. However if you are unlucky and find a specific spot while hovering on the button it quickly switches between the normal and hover state.
My code:
button {
height: 34px;
padding: 0 16px;
border-radius: 4px;
margin: 8px;
border: none;
background: red;
color: #fff;
transition: background .2s, transform .2s;
outline: none;
cursor: pointer;
}
button:hover {
box-shadow: 4px 4px 0 0 blue;
transform: translate(-1px, -1px);
}
button:active {
background: green;
box-shadow: 2px 2px 0 0 blue;
}
<button>I am a button</button>
Code
Is there a trick to solve this issue?

Answer 1

The cause is the transform on hover. As soon as you stop hovering, the button goes back to place. If you've only moved one pixel away, you are now hovering the button again, which moves 1px away, and now is not hovered, and so on.
The best solution would be to remove the transform effect.
If you can't, a simple solution would be to add a transparent border around the button when it's hovered. You'll have to go another pixel to stop hovering the button, and when the hover stops you'll be outside of the new button position.
button {
height: 34px;
padding: 0 16px;
border-radius: 4px;
margin: 8px;
border: none;
background: red;
color: #fff;
transition: background .2s, transform .2s;
outline: none;
cursor: pointer;
}
button:hover {
box-shadow: 4px 4px 0 0 blue;
transform: translate(-1px, -1px);
border: 1px solid transparent;
}
button:active {
background: green;
box-shadow: 2px 2px 0 0 blue;
}
<button>I am a button</button>

Answer 2

A solution could be to add a container with a small padding, and check the hover on it instead of the button. Since it doesn't move, you shouldn't have the problem.
#buttonContainer {
display: inline-block;
padding: 2px;
}
button {
height: 34px;
padding: 0 16px;
border-radius: 4px;
margin: 8px;
border: none;
background: red;
color: #fff;
transition: background .2s, transform .2s;
outline: none;
cursor: pointer;
}
#buttonContainer:hover button{
box-shadow: 4px 4px 0 0 blue;
transform: translate(-1px, -1px);
}
button:active {
background: green;
box-shadow: 2px 2px 0 0 blue;
}
<div id="buttonContainer">
<button>I am a button</button>
</div>