首頁 > web前端 > css教學 > css實作一個簡單的扁平化按鈕

css實作一個簡單的扁平化按鈕

王林
發布: 2020-09-18 17:43:33
轉載
3519 人瀏覽過

css實作一個簡單的扁平化按鈕

我們先來看下按鈕樣式:

(推薦教學:CSS教學

css實作一個簡單的扁平化按鈕

具體程式碼:

<button id="btn">打印</button>

//js写法
$("#btn").css({
	"font-family": "&#39;微软雅黑&#39;,&#39;Helvetica Neue&#39;,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: "&#39;微软雅黑&#39;,&#39;Helvetica Neue&#39;,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;
}
登入後複製

以上是css實作一個簡單的扁平化按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板