When I hover on element it's shaking. How fix? - html

Question

I have a heading text and a button below it. When I hover on button, the text into the heading and the button is shaking. I fixed it with the css property backface-visibility and then the text into the elements was blurred. How to solve this problem without the blurry effect ?
e.g. https://codepen.io/yozhikk/pen/odJVeY
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color: #777777;
padding: 30px;
}
.header {
position: relative;
height: 95vh;
background-image: linear-gradient( to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 131, 0.8)), url(../img/hero.jpg);
background-size: cover;
background-position: top;
clip-path: polygon( 0% 0%, 0% 100%, 100% 75vh, 100% 0%)
}
.logo-box {
position: absolute;
top: 40px;
left: 40px;
}
.logo {
height: 35px;
}
.heading-primary {
color: #ffffff;
text-transform: uppercase;
margin-bottom: 60px;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
.heading-primary-main {
font-weight: 400;
font-size: 60px;
letter-spacing: 35px;
display: block;
animation: moveInLeft 1.5s ease-out
}
.heading-primary-sub {
font-weight: 700;
font-size: 20px;
letter-spacing: 17.4px;
display: block;
animation: moveInRight 1.5s ease-out
}
.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.btn:link,
.btn:visited {
text-decoration: none;
text-transform: uppercase;
display: inline-block;
border-radius: 100px;
padding: 15px 40px;
transition: all .2s;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
.btn:hover {
transform: translateY(-3px);
}
.btn:active {
transform: translateY(-1px);
}
.btn {}
.btn-white {
background-color: #fff;
color: #777777;
}
#keyframes moveInLeft {
0% {
opacity: 0;
transform: translateX(-100px)
}
80% {
transform: translateX(10px)
}
100% {
opacity: 1;
transform: translate(0)
}
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(100px)
}
80% {
transform: translateX(-10px)
}
100% {
opacity: 1;
transform: translate(0)
}
}
<header class="header">
<div class="logo-box">
<img src="img/logo-white.png" alt="" class="logo">
</div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">outdoors</span>
<span class="heading-primary-sub">is where live happens</span>
</h1>
Discover our tours
</div>

Answer 1

Remove these lines:
.btn:hover {
transform: translateY(-3px);
}
.btn:active {
transform: translateY(-1px);
}
They move the button up on hover / active for no apparent reason, which I assume is the shaking you are talking about. So just not doing that should fix it.

Answer 2

Give the same property you added to the hover state to the initial state but make it invisible. If you give the hover state (border : 2px solid and pink;) add it in the initial state but you can make the color transparent( border: 3px solid transparent;) so it won't show before hovering on it