css中按钮怎么设宽和高（鼠标悬停在按钮上）

用 HTML 在页面上放置了一个按钮

<button class="btn">点击按钮</button>

如果想要实现当鼠标悬停在按钮上时，按钮文字加粗，在 CSS 里这样设置

.btn:hover { font-weight: bolder; }

但是这样做了之后，当文字加粗后，势必会将按钮的尺寸撑的更大。那么有可能会影响到按钮周围其他 HTML 元素的位置，如果你的页面内容比较多，而且比较紧凑的话，撑大的按钮会将周围的元素推开，这很有可能会扰乱页面的布局。

如果既要保留按钮的鼠标悬停文字加粗的效果，还不能影响到周围元素的位置，可以再给按钮设定一个固定的尺寸。

.btn { padding: 1rem; width: 4rem; } .btn:hover { font-weight: bolder; }

这样按钮的尺寸就不会变化，但是文字在鼠标悬停时会加粗，按钮周围的元素也不会受到影响。

以上这种情况一般在页面顶部的导航条上最为常见，请大家注意。