css实现一个简单的扁平化按钮

发布日期:2020年9月18日 20:18 星期五

  • 正文内容
  • 相关推荐

css实现一个简单的扁平化按钮

 

我们先来看下按钮样式:

7f31d19342fa0f02d63ca4379d6306a.png

具体代码:

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

}
趣乐分享-趣乐资源网
如有密码均为:www.itql.cn
学到东西应该懂得感恩作者 无脑喷子永封IP段+删帐号所有评论
本站资源软件和源码 文章大部分为网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,并向您赔礼道歉.

站长QQ:209993299  

作者资料
描述: 90后草根站长!不忘初心,方得始终!

本文标签:

文章标题:css实现一个简单的扁平化按钮

文章链接:https://www.itql.cn/post-3859.html

版权声明:若无特殊注明,本文皆为《钱哆哆》原创,转载请保留文章出处。