css实现一个简单的扁平化按钮-木庄网络博客

本文摘自PHP中文网，作者V，侵删。

我们先来看下按钮样式：

（推荐教程：CSS教程）

具体代码：

<button id="btn">打印</button>
 
//js写法
$("#btn").css({
    "font-family": "'微软雅黑','Helvetica Neue',Helvetica,Arial,sans-serif",
    "font-size": "13px!important",
    "height": "30px",
    "line-height": "18px!important",
    "padding": "3px 18px",
    "display": "inline-block",
    "vertical-align": "middle",
    "font-weight": "normal",
    "border-radius": "2px",
    "margin": "0 8px 0 3px",
    "border": "1px solid #3383da",
    "color": "#ffffff",
    "background-color": "#3383da"
});
 
//css写法
#btn{
    font-family: "'微软雅黑','Helvetica Neue',Helvetica,Arial,sans-serif";
    font-size: 13px!important;
    height: 30px;
    line-height: 18px!important;
    padding: 3px 18px;
    display: inline-block;
    vertical-align: middle;
    font-weight: normal;
    border-radius: 3px;
    margin: 0 8px 0 3px;
    border: 1px solid #3383da;
    color: #ffffff;
    background-color: #3383da;
    cursor: pointer;
}