悬停时的按钮大小

Question

网页设计新手。有人可以向我解释一下。我在同一行有两个按钮。我已将边框设置为在悬停时显示在一个按钮上。问题是按钮大小改变了。有时宽度，有时高度，间距......在样式菜单链接之前有相同的问题。我想知道如何以按钮大小保持不变的方式设置css。比你提前

.btn-container {
    display: flex;
}

.btn-container a {
    display: block;
    height: 3em;
    padding: 1em 3em;
    margin-right: 2em; 
    border-radius: .5em;
    text-decoration: none;
    text-transform: uppercase;
}

.btn-container #btn_1 {
    background: #59ED99;
    color: white;
    font-weight: 500;
}

.btn-container #btn_2 {
    border: .1em solid #59ED99;
    background: transparent;
    color: #59ED99;
}

.btn-container #btn_1:hover {
    border: .1em solid #59ED99;
    background: transparent;
    color: #59ED99;
}

<div class="btn-container">
  <a href="#" id="btn_1">Get Started</a>
  <a href="#" id="btn_2">Learn More</a>
</div>

Answer 1

* {
  box-sizing: border-box;
}

.btn-container {
    display: flex;
}

.btn-container a {
    display: block;
    height: 3em;
    padding: 1em 3em;
    margin-right: 2em; 
    border-radius: .5em;
    text-decoration: none;
    text-transform: uppercase;
}

.btn-container #btn_1 {
    background: #59ED99;
    border: .1em solid transparent;
    color: white;
    font-weight: 500;
}

.btn-container #btn_2 {
    border: .1em solid #59ED99;
    background: transparent;
    color: #59ED99;
}

.btn-container #btn_1:hover {
    border-color: #59ED99;
    background: transparent;
    color: #59ED99;
}

<div class="btn-container">
  <a href="#" id="btn_1">Get Started</a>
  <a href="#" id="btn_2">Learn More</a>
</div>

Answer 2

您需要为第一个按钮（＃btn_1）添加透明边框。这样，悬停时不会添加边框。

.btn-container {
    display: flex;
}

.btn-container a {
    display: block;
    height: 3em;
    padding: 1em 3em;
    margin-right: 2em; 
    border-radius: .5em;
    text-decoration: none;
    text-transform: uppercase;
}

.btn-container #btn_1 {
    background: #59ED99;
    border: .1em solid transparent;
    color: white;
    font-weight: 500;
}

.btn-container #btn_2 {
    border: .1em solid #59ED99;
    background: transparent;
    color: #59ED99;
}

.btn-container #btn_1:hover {
    border: .1em solid #59ED99;
    background: transparent;
    color: #59ED99;
}

<div class="btn-container">
  <a href="#" id="btn_1">Get Started</a>
  <a href="#" id="btn_2">Learn More</a>
</div>

对于大小问题，我们需要了解有关基本样式表的更多信息。您还可以设置特定的宽度和高度。您还可以设置max-height属性。