如果我将鼠标悬停在按钮上，它们将移动（？）其他元素。
如您所见，我已经尝试通过从高度和宽度中减去+4像素来补偿边界上的+4像素，但问题仍然存在。
我不要这个。我希望它改变外观而没有任何变化。
Here a video to visualize my problem
提前谢谢您：）
这里是CSS和HTML
HTML：
<body>
<nav>
<img class="logo" src="images/logo-bookmark.svg" alt="Logo nav">
<div class="navElements">
<a href="#" class="nav-links">Features</a>
<a href="#" class="nav-links">Pricing</a>
<a href="#" class="nav-links">Contact</a>
<a href="#" class="nav-logo-btn">Login</a>
</div>
</nav>
<section class="header">
<div class="header-left">
<h1 class="header-heading">A Simple Bookmark Manager</h1>
<p class="header-text"> A clean and simple interface to organize your favourite websites. Open a new
browser tab and see your sites load instantly. Try it for free.</p>
<a href="#" class="btn-1">Get it on Chrome</a>
<a href="#" class="btn-2">Get it on Firefox</a>
</div>
<img class="header-img" src="images\illustration-hero.svg" alt="Hero image">
登录按钮：
.nav-logo-btn {
text-decoration: none;
color: white;
background-color: var(--SoftRed);
padding: 10px 32px;
border-radius: 5px;
text-transform: uppercase;
font-weight: 500;
font-family: "Rubik";
font-size: 12px;
letter-spacing: 2px;
}
.nav-logo-btn:hover {
color: var(--SoftRed);
background-color: white;
border: solid 2px;
padding: 8px 30px;
transition: all 0.3s;
}
Chrome / Firefox按钮：
.btn-1, .btn-2 {
display: inline-block;
text-decoration: none;
border-radius: 5px;
text-align: center;
line-height: 48px;
height: 48px;
width: 165px;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
position: relative;
}
.btn-1:hover, .btn-2:hover {
background-color: white;
border: solid 2px;
height: 44px;
width: 161px;
}
.btn-1 {
background-color: var(--SoftBlue);
color: white;
}
.btn-2 {
background-color: #f7f7f7;
color: #606068;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
left: 50px;
}
.btn-1:hover {
color: var(--SoftBlue);
}
.btn-2:hover {
color: #606068;
}
您应该在标题类上添加backface-visibility: hidden;，它将起作用