悬停按钮问题

Question

我在我的页面上放置了一个按钮，每当我把鼠标悬停在该按钮上时，我的文字和。

---

稍微向上移动。请帮助我（我是一个初学者）--代码将显示在下面。

.btn {
  font-weight: 700px;
  border-radius: 500px;
  text-transform: uppercase;
  border-color: none;
  padding: 10px;
}

.btn-xl {
  padding: 1rem 2rem;
  background-color: #4B307B;
  border-color: white;
}

.btn-xl:hover {
  background-color: gold;
  border-width: 3px;
  border-color: #4B307B;
}

hr {
  border-color: gold;
  width: 150px;
  max-width: 65px;
}

<div class="container d-flex align-items-center h-100">
  <div class="row">
    <header class="text-center col-12">
      <h1 class="text-uppercase"><strong>Graduation Support</strong></h1>
    </header>
    <div class="buffer col-12"></div>
    **
    <section class="text-center col-12">
      <hr>
      <button class="btn btn-primary btn-xl">Find out more</button>
    </section>**
  </div>
</div>

Answer 1

你需要添加 border-width: 3px; 至 .btn-xl 类，而不仅仅是悬停类。 我相信是悬停时出现的边框导致了这个问题。 请看这里。

.btn{
    font-weight: 700px;
    border-radius: 500px;
    text-transform: uppercase;
    border-color: none;
    padding: 10px;
}

.btn-xl{
    padding: 1rem 2rem;
    background-color: #4B307B;
    border-color: white;
    border-width: 3px;

}
.btn-xl:hover{
    background-color: gold;
    border-width: 3px;
    border-color: #4B307B;

}

hr{
    border-color: gold;
    width: 150px;
    max-width: 65px;
}

<div class="container d-flex align-items-center h-100">
            <div class="row">
                <header class="text-center col-12">
                <h1 class="text-uppercase"><strong>Graduation Support</strong></h1>
                </header>
                <div class="buffer col-12"></div>
            **<section class="text-center col-12">
                <hr>
                <button class="btn btn-primary btn-xl">Find out more</button>
            </section>**
            </div>
    </div>