如何在导航栏中向右浮动按钮，使其不影响主导航栏？

<div class="navbar">
  <ul class="nav-list">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
  </ul>
  <div class="float-button">
    <a href="#">按钮</a>
  </div>
</div>

.navbar {
  position: relative;
  background-color: #f2f2f2;
  padding: 10px;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list li {
  margin-right: 10px;
}

.float-button {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background-color: #ff0000;
  padding: 5px 10px;
}

.float-button a {
  color: #fff;
  text-decoration: none;
}

.float-button:hover {
  background-color: #cc0000;
}