在编写网页时,在按钮悬停时,为了增强交互,通常会高亮边框,有时也会增加边框的厚度,例如按钮的边框本来是1px的浅色,在悬停后边框变成了2px的深色。这时候按钮的大小就会发生变化,导致变形。
例如下面的两张图片
这时应该分两种情况讨论,一种是按钮的大小给了一个固定值,一种是按钮大小为auto。
给了固定值的很好说,将 box-sizing
设置为 border-box
即可,按钮的大小就不会变化。
box-sizing: border-box;
按钮大小为auto的,如果border的宽度变大,则应该减小相应的padding值,这样也可以保证按钮的大小不会变化。
.btn{
background-color: #fff;
color: #666666;
border: 1px solid #ccc;
padding: 5px;
&:hover{
padding: 4px;
color: red;
border: 2px solid red;
}
}
对于不确定大小的按钮,通常使用第二种方法就可以解决变形的问题。