Home >Web Front-end >CSS Tutorial >CSS implements a simple flat button
Let’s take a look at the button style first:
(Recommended tutorial: CSS tutorial)
Specific code:
<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; }
The above is the detailed content of CSS implements a simple flat button. For more information, please follow other related articles on the PHP Chinese website!