全等比缩放按钮

全等比缩放按钮

网页中经常会用到按钮，尤其是移动端更为明显，但是通常我们都是固定写死按钮的宽、高、背景、圆角之类的，这么做虽然没什么问题，但是如果后期想把这个按钮大小改变的话，必定会改许多属性，那么对于后期维护多多少少会带来一些不便，今天漠白分享一种新的实现方法解决这一问题。
预览地址：全等比缩放按钮

单位选择

既然要实现等比例缩放，那么我们首先肯定会想到一些尺寸单位，比如百分比、em、rem，这里我感觉用em最为合适，因为em的特性更适合我们的按钮。

em特性：根据父元素字号进行比例缩放，如果自身设置了font-size则根据自身字号来计算比例。

关键的CSS样式

1. 宽高我觉得用padding来实现是最好了，如果写死的话，之后增加文字字数肯定会影响样式。

2. 然后利用border-radius增加了一个小圆角，这里为了让圆角也是等比缩放，依然选择em为单位。

3. 最后我把背景设置了一个小渐变，不过这里利用到一个小技巧，使之后增加的按钮只需要操作背景颜色，而不用去操作渐变就能实现不同背景色的渐变效果。

之后要更改按钮大小的话，只需要更改字体大小就能实现等比例缩放，其他不需要做任何修改，是不是方便很多？下边是按钮的实例代码。

HTML代码

增加
编辑

删除
警告

按钮的通用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;
}