Prevent twitching buttons on hover - html

Question

I have a button that on hover will go up by 10px. The problem is if the cursor is positioned at just barely under the button when the button is transitioned or transitioning by 10px, it twitches.
.talk-to-us {
padding: 10px;
height: 43px;
width: 148px;
background-color: #00cdac;
position: relative;
transition: top ease .40s;
top: 0;
}
.talk-to-us:hover {
top: -10px;
}
.link {
color: white;
font-size: 14px;
padding: 10px;
}
<button class="talk-to-us">
<a class="link" href="#">TALK TO US!</a>
</button>
How do I prevent this behavior solely by CSS?

Answer 1

One possibility would be to add a pseudo element that extends downward far enough to account for the upward shift, so the mouse remains within the target area. With a transparent background you won't see it but it still captures mouse events.
The only change here is the addition of the ::after selector/rules:
.talk-to-us {
padding: 10px;
height: 43px;
width: 148px;
background-color: #00cdac;
position: relative;
transition: top ease .40s;
top: 0;
}
.talk-to-us:hover {
top: -10px;
}
.talk-to-us:hover::after {
content: '';
position: absolute;
height: 20px;
background: transparent;
left: 0;
right: 0;
top: 100%;
}
.link {
color: white;
font-size: 14px;
padding: 10px;
}
<button class="talk-to-us">
<a class="link" href="#">TALK TO US!</a>
</button>