CSS扁平按鈕樣式是當(dāng)前網(wǎng)頁設(shè)計(jì)領(lǐng)域中比較流行的一種按鈕樣式,它主要的特點(diǎn)就是沒有立體感,沒有3D效果,顏色也很簡約,看起來很干凈舒適。而且它適用于各種網(wǎng)頁設(shè)計(jì)風(fēng)格,可以凸顯主題的同時(shí),不會(huì)影響整個(gè)頁面的風(fēng)格。
button { background-color: #f1c40f; border-radius: 5px; border: none; box-shadow: none; color: #fff; cursor: pointer; display: inline-block; font-size: 16px; margin: 10px; padding: 10px 20px; text-decoration: none; text-align: center; text-transform: uppercase; transition: background-color 0.3s ease; } button:hover { background-color: #e67e22; }
上述代碼是一個(gè)簡單的CSS代碼,它定義了一個(gè)扁平按鈕的樣式。CSS的background-color屬性定義了按鈕的背景顏色,border-radius屬性定義了按鈕的圓角大小,border屬性定義了按鈕的邊框樣式,box-shadow屬性定義了按鈕的陰影效果。而color屬性定義了按鈕上文字的顏色,cursor屬性定義了鼠標(biāo)懸停時(shí)的光標(biāo)形狀,font-size屬性定義了文字的大小,margin屬性定義了按鈕與其它元素的間距,padding屬性定義了按鈕內(nèi)部的間距,text-decoration屬性定義了文字的下劃線樣式。而text-align屬性定義了文字的對齊方式,text-transform屬性定義了文字的大小寫格式。
此外,我們還可以使用:hover偽類來定義按鈕的懸停效果。上述代碼中,button:hover定義了按鈕在鼠標(biāo)懸停時(shí)的樣式,使按鈕的背景顏色發(fā)生顏色漸變效果。
總之,CSS扁平按鈕樣式是一種簡單、干凈、美觀的按鈕樣式,它非常適用于現(xiàn)代網(wǎng)絡(luò)設(shè)計(jì)。使用者只要運(yùn)用CSS語言,便可以輕松實(shí)現(xiàn)扁平按鈕的樣式效果。