html - 在按钮悬停时限制 div 调整大小

Question

我正在使用 css 创建一个带有按钮的导航栏，我希望在不调整 div 大小的情况下悬停时具有背景颜色。我希望按钮留在原地，只是在它们后面有背景颜色。

.topnav {
  overflow: hidden;
  background-color: #1C313A;
}

.topnav a {
  float: left;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav-right {
  float: right;
}

button {
  padding: 0px 0px;
  background-color: transparent;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  margin-left: 20px;
}

button:hover {
  width: 50px;
  height: 50px;
  background-color: #192C34;
  border-radius: 50%;
  padding: 0px 0px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav">
  <a href="#home">
    <button>
                <i class="fa fa-save fa-lg"></i>
              </button>
  </a>

  <a href="#news"><button>
            <i class="fa fa-upload fa-lg"></i>
          </button></a>

  <a href="#contact">
    <button>
                <i class="fa fa-save fa-lg"></i>
              </button>
  </a>

  <div class="topnav-right">
    <a class="logo" style="pointer-events:none;">TidyBlocks</a>
  </div>
</div>

当前输出:

期望的输出

Answer 1

.topnav {
  overflow: hidden;
  background-color: #1C313A;
}

.topnav a {
  float: left;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav-right {
  float: right;
}

button {
  padding: 0px 0px;
  background-color: transparent;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  margin-left: 20px;
  width: 50px;
  height: 50px;
}

button:hover {      
  background-color: #192C34;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav">
  <a href="#home">
    <button>
                <i class="fa fa-save fa-lg"></i>
              </button>
  </a>

  <a href="#news"><button>
            <i class="fa fa-upload fa-lg"></i>
          </button></a>

  <a href="#contact">
    <button>
                <i class="fa fa-save fa-lg"></i>
              </button>
  </a>

  <div class="topnav-right">
    <a class="logo" style="pointer-events:none;">TidyBlocks</a>
  </div>
</div>