全等比缩放按钮
网页中经常会用到按钮，尤其是移动端更为明显，但是通常我们都是固定写死按钮的宽、高、背景、圆角之类的，这么做虽然没什么问题，但是如果后期想把这个按钮大小改变的话，必定会改许多属性，那么对于后期维护多多少少会带来一些不便，今天漠白分享一种新的实现方法解决这一问题。
预览地址：全等比缩放按钮
单位选择
既然要实现等比例缩放，那么我们首先肯定会想到一些尺寸单位，比如百分比、em、rem，这里我感觉用em最为合适，因为em的特性更适合我们的按钮。
em特性：根据父元素字号进行比例缩放，如果自身设置了font-size则根据自身字号来计算比例。
关键的CSS样式
宽高我觉得用
padding来实现是最好了，如果写死的话，之后增加文字字数肯定会影响样式。然后利用
border-radius增加了一个小圆角，这里为了让圆角也是等比缩放，依然选择em为单位。最后我把背景设置了一个小渐变，不过这里利用到一个小技巧，使之后增加的按钮只需要操作背景颜色，而不用去操作渐变就能实现不同背景色的渐变效果。
之后要更改按钮大小的话，只需要更改字体大小就能实现等比例缩放，其他不需要做任何修改，是不是方便很多？下边是按钮的实例代码。
HTML代码
<a class="but" href="#">增加</a>
<a class="but but2" href="#">编辑</a><br>
<a class="but but3" href="#">删除</a>
<a class="but but4" href="#">警告</a>
按钮的通用CSS
.but{
display: inline-block;
font-size: 14px;
color: #fff;
padding: .5em 1.2em;
border: 1px solid rgba(0,0,0,.14);
text-shadow: 0 -.03em .02em #335166;
border-radius: .3em;
background: #009688 linear-gradient(rgba(255,255,255,.3),transparent);
}
各自定义背景颜色的按钮
.but2{
background-color: #1E9FFF;
}
.but3{
background-color: #FFB800;
}
.but4{
background-color: #FF5722;
}
