如何修改按钮内字体大小且保持按钮尺寸与导航栏布局不变？

要实现按钮内字体单独变化，但按钮本身尺寸、导航栏及页面布局完全保持不变，核心是固定按钮的盒模型尺寸，并让文本在固定空间内居中，彻底切断字体大小对按钮尺寸的影响。

具体修改方案 #

1. 重构按钮基础布局 #

给所有按钮添加flex布局实现文本居中，固定宽高并移除冗余内边距，确保按钮尺寸不受内部内容干扰：

• 用display: flex + justify-content: center + align-items: center替代line-height实现文本居中，更稳定且不受字体大小影响
• 设置固定的width和height，同时将padding设为0，避免内边距与字体大小叠加撑大按钮
• 添加overflow: hidden（可选）防止超大字体溢出按钮边界

2. 简化目标按钮的hover样式 #

针对问号按钮（#cshark），hover时仅修改字体大小、边框及文字颜色，无需重复声明宽高、内边距等固定属性，减少冗余代码。

修改后的完整代码 #

CSS 代码

nav {
  text-align: center;
  padding: 10px;
  display: block;
}

button {
  /* 固定按钮尺寸，彻底锁定盒模型 */
  height: 70px;
  width: 70px;
  background-color: #AAAAAA;
  border: .5px solid crimson;
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 0 30px 0 crimson, 0 0 30px 0 crimson, 0 0 10px 0 crimson inset;
  margin: 10px;
  /* Flex布局实现文本居中，不受字体大小影响 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 可选：防止超大字体溢出按钮 */
  overflow: hidden;
}

.links {
  background-color: rgb(51, 51, 51);
  margin: 10px;
}

#shark {
  color: #FFFFFF;
  background-color: black;
  border-radius: 25%;
  transition-property: border-radius, border, color;
  transition-duration: .1s;
  transition-timing-function: ease;
  transition-delay: .3s;
  margin: 10px;
}

#shark:hover {
  border-color: orange;
  color: orange;
}

#bshark {
  width: 100px;
  height: 20px;
  color: #AAAAAA;
  background-color: black;
  border-radius: 25%;
  box-shadow: none;
  transition-property: border-radius, border, color;
  transition-duration: .1s;
  transition-timing-function: ease;
  transition-delay: .3s;
}

#bshark:hover {
  border-color: orange;
  color: orange;
}

#cshark {
  width: 100px;
  height: 20px;
  color: #AAAAAA;
  background-color: black;
  border-radius: 25%;
  box-shadow: none;
  transition-property: border-radius, border, color, font-size;
  transition-duration: .1s;
  transition-timing-function: ease;
  transition-delay: .3s;
}

#cshark:hover {
  border-color: green;
  color: green;
  font-size: 20px;
}

HTML 代码

<nav class="links">
  <a href=""><button id="bshark">Protective</button></a>
  <a href=""><button id="bshark">Destructive</button></a>
  <a href=""><button id="cshark">?</button></a>
</nav>

关键原理说明 #

• 固定盒模型：按钮的宽高设置为固定值，且内边距归零，确保按钮的整体尺寸完全不受内部文本大小变化的影响
• Flex居中：flex布局会自动将文本限制在按钮的固定空间内居中，不会因字体变大而撑开按钮
• 简化过渡属性：仅声明需要变化的属性，避免重复设置固定样式，提升代码效率

内容的提问来源于stack exchange，提问作者Feuergeist