前言
为了减少重复造轮子，打算记录一些CSS样式的小技巧，后期会继续更新……
目标
实现自适应按钮，即：按钮可以根据父级字体大小来调整自身的大小。
当需要修改按钮颜色时可以直接利用css层叠覆盖实现，使得代码更易于维护。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自适应按钮</title>
<style type="text/css">
body {
font-size: 16px;
}
/*
*具有缩放效果的按钮样式，父级需要设置font-size
*可以通过background-color,border-color覆盖得到不同颜色的按钮
**/
button {
padding: .3em .8em;
border: 1px solid #446d88;
/*background: #58a linear-gradient(#77a0bb,#58a);*/
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
border-radius: .2em;
/*box-shadow: 0 .05em .25em gray;*/
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
color: white;
text-shadow: 0 -.05em .05em #335166;
font-size: 125%;
line-height: 1.5;
}
button.ok {
background-color: #6b0;
border-color: #4B946A;
}
</style>
</head>
<body>
<button>
yes!
</button>
<br />
<br />
<button class="ok">
ok
</button>
</body>
</html>
运行效果图
父级字体大小为16px时：
将父级字体大小改为26px：font-size: 26px;
按钮会整体放大，如下：
