1. css 代碼
1.1 初步
.btn{
color: #fff;
border: 0;
font-size: 18px;
outline: none;
padding: 5px 10px;
background: #ace;
border-radius: 4px;
/* 設(shè)置文字陰影 */
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
/* 設(shè)置盒子陰影 */
box-shadow: 0 4px 0 #9cb8d8, 0 3px 20px rgba(0,0,0,0.3);
/* 交互性 */
cursor: pointer;
}
.btn:active {
/* 按鈕按下去之后周圍的光源應(yīng)該沒那么強(qiáng)烈了组砚，所以可以考慮適當(dāng)減少陰影 */
text-shadow: 0 -1px 0 rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
position: relative;
top: 3px;
}
1.2 比例（陰影部分也按照比例放大）
.btn {
color: #fff;
border: 0;
font-size: 18px;
outline: none;
padding: 0.278em 0.556em;
background: #ace;
border-radius: 0.22em;
/* 設(shè)置文字陰影 */
text-shadow: 0 -0.056em 0 rgba(0,0,0,.3);
/* 設(shè)置盒子陰影 */
box-shadow: 0 0.22em 0 #9cb8d8, 0 0.167em 1.11em rgba(0,0,0,0.3);
/* 交互性 */
cursor: pointer;
}
.btn:active {
/* 按鈕按下去之后周圍的光源應(yīng)該沒那么強(qiáng)烈了，所以可以考慮適當(dāng)減少陰影 */
text-shadow: 0 -0.056em 0 rgba(0,0,0,.1);
box-shadow: 0 0 0.556em rgba(0, 0, 0, 0.5) inset;
position: relative;
top: 0.167em;
}
//最終我們可以根據(jù)字體大小來調(diào)整button的大小，陰影部分也會(huì)隨著增大減小送火。
.btn {
margin-left: 30px;
}
.btn-md {
font-size: 30px;
}
.btn-lg {
font-size: 50px;
}
2. html代碼
<button class="btn">保存</button>
<button class="btn btn-md">保存</button>
<button class="btn btn-lg">保存</button>
效果
3. 兼容性
text-shadow 不兼容IE10以下瀏覽器
box-shadow不兼容IE9以下瀏覽器
