HTML/CSS 按钮悬停将其他所有内容移走？

Question

如果我将鼠标悬停在我的按钮上，它们会移动（？）其他元素。

如您所见，我已经尝试通过从高度和宽度中减去它们来补偿边框的 +4 像素，但问题仍然存在。

我不想要这个。我希望它改变外观而不进行任何移动。

提前谢谢你:)

这里是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;
}

Answer 1

您应该在页眉中添加 backface-visibility: hidden; class 它将起作用

Answer 2

不要在悬停时添加 2px 边框，而是使用 box-shadow。它不影响元素的物理大小。

.btn-1:hover, .btn-2:hover {
  background-color: white;
  box-shadow: 0px 0px 0px 2px var(--SoftBlue);
  height: 44px;
  width: 161px;
}

Answer 3

另一个简单的选择是简单地更改鼠标悬停时的边框颜色，而不是添加大多数情况下不存在的边框。

考虑：

.button {
  display:block;
  float: left;
  margin: 20px;
  background: #dadada;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 12px;
  font-family: Helvetica, Arial, Sans-Serif;
  cursor:pointer;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.jumpy:hover {
  border: 4px solid blue;
}

.smooth {
  border: 4px solid transparent;
}

.smooth:hover {
  border-color: blue;
}

<div class="button jumpy">Jumpy Button</div>
<div class="button smooth">Smooth Button</div>

HTML/CSS 按钮悬停将其他所有内容移走？

HTML/CSS Button Hover shifting everything else away?

html

css

button

hover