Button snaps back after transform transition on hover - html

Question

I'm trying to make a button which, on hover, will go up 5px.
It works fine with transitions. But the problem is that, when I hover my mouse on the lower part of the button, as soon as I move the mouse (I'm guessing it checks :hover on mouse update, but I'm new to CSS...), since the button has gone up, it realizes it no longer hovers, so it snaps back into position, and it ends up flickering.
.btn {
display:inline-block;
transform: translate(0px,0px);
transition: transform 50ms ease ;
}
.btn:hover {
transform: translate(0px,-5px);
transition: transform 50ms ease ;
}
<button class="ui button btn"> That rocks!</button>
How can I prevent this behavior? Only possible solution I've found is to use display: inline-block, but it doesn't seem to make any difference.
Also, I've tried using a container div, but it still does the same thing.

Answer 1

Seems to work OK with a container, if you monitor :hover on the container, then transform the button. And you only need to define transition and transform once each.
.btn {
display: inline-block;
transition: transform 50ms ease;
}
div:hover .btn {
transform: translate(0px, -5px);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<button class="ui button btn"> That rocks!</button>
</div>

Answer 2

Put the button into a container, and make it so when you hover over the container it changes the child button:
.container:hover .btn {
transform: translate(0px,-5px);
}

Answer 3

If you set the hover event on the container it should work.
.btn {
display:inline-block;
transform: translate(0px,0px);
transition: transform 50ms ease ;
}
div {
transition: transform 50ms ease ;
background: pink;
}
div:hover .btn {
transition: transform 50ms ease ;
transform: translate(0px,-5px);
}
<div>
<button class="ui button btn"> That rocks!</button>
</div>

Answer 4

When hovering, add an ::after pseudoelement with these styles:
.btn:hover::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 10px;
}
It will keep the focus on the button.
Snippet:
.btn {
display:inline-block;
transform: translate(0px,0px);
transition: transform 50ms ease;
}
.btn:hover::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 10px;
}
.btn:hover {
transform: translate(0px,-5px);
transition: transform 50ms ease ;
}
<button class="ui button btn"> That rocks!</button>