当按钮的边框大小变动时，如何保证不变形

在编写网页时，在按钮悬停时，为了增强交互，通常会高亮边框，有时也会增加边框的厚度，例如按钮的边框本来是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;
    }
}

对于不确定大小的按钮，通常使用第二种方法就可以解决变形的问题。