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

您需要为第一个按钮（＃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属性。

Answer 2

* {
  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>

悬停按钮尺寸

2 个答案: