制作可扩展的按钮
下面这段CSS代码给body中class="btn"的按钮添加了一些效果，CSS代码如下：
1 .btn{ 2 padding:6px 16px; 3 border:1px solid #446d88; 4 background: #58a linear-gradient(#77a0bb,#58a); 5 border-radius:5px; 6 box-shadow: 0 1px 5px gray; 7 color:white; 8 text-shadow: 0 -1px 1px #335166; 9 font-size:20px; 10 line-height: 30px; 11 }
效果如下：
按钮看上去不错，但是当我们想扩展一下，做一个大一号的按钮的时候，我们要改很多东西，改字体，改行高， 改边框半径等等所有影响到按钮整体协调性且用PX为单位的属性。所以为了按钮的可扩展性，我们要用相对的单位em或者百分比代替px值，但是在此
之前一定要明白哪些效果应该随着按钮一起增大，哪些效果应该保持不变。现在我们把除了边框（希望大按钮也保持1px的边框）以外的值都用相对单位em（相对于父级元素字体大小,父级元素默认字体大小16px，1em=16px）来改写，CSS代码如下：
1 .btn{ 2 padding:.3em .8em; 3 border:1px solid #446d88; 4 background: #58a linear-gradient(#77a0bb,#58a); 5 border-radius:.2em; 6 box-shadow: 0 .05em .25em gray; 7 color:white; 8 text-shadow: 0 -.05em .05em #335166; 9 font-size:125%; 10 line-height: 1.5;
}
现在我们将按钮的父级元素body的字体增大一倍：
1 body{ font-size:32px; }
再来看看按钮的效果：
可以看到按钮整体增大了一倍。效果看上去跟小的按钮一模一样。
关于可扩展的按钮，还要考虑阴影，在白色的背景上，灰色阴影比较好，但是换成别的颜色的背景，要考虑改变text-show，border-shadow的颜色。但这个有个很好的解决方法就是把半透明的白色rgba（1,1,1,.5）或半透明黑色rgba（0,0,0,.5）
的阴影叠加到主色调上就能产生和主色调相协调的阴影。
现在如果我们想要扩展一个两个按钮，一个红色的“确定”按钮，一个绿色的“取消”按钮时候。只用在我们想要的按钮上加入这个.btn的类，此外写一个重写background-color属性来覆盖.btn中的background-color属性即可
html代码如下：
1 <button class="btn">Yes!</button> 2 <button class="ok btn">确定</button> 3 <button class="cancel btn">取消</button>
CSS代码如下：
1 .btn{ 2 padding:.3em .8em; 3 border:1px solid rgba(0,0,0,0.1); 4 background: #58a linear-gradient(hsla(0,0%,100%,0.2),transparent); 5 border-radius:.2em; 6 box-shadow: 0 .05em .25em rgba(0,0,0,.5); 7 color:white; 8 text-shadow: 0 -.05em .05em rgba(0,0,0,.5); 9 font-size:125%; 10 line-height: 1.5; 11 } 12 .ok{ 13 background-color: #6b0; 14 } 15 .cancel{ 16 background-color:#c00; 17 }
效果如下：
