html中按钮扁平化设置,css实现一个简单的扁平化按钮

我们先来看下按钮样式：

(推荐教程：CSS教程)

具体代码：打印

//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;

}