利用 CSS 修改 HTML 按鈕背景顏色

HTML 按鈕背景顏色預設值比較單純,特別是在設計較具有特殊風格的網頁時,常常顯得質感不夠好,所以網頁設計師通常會需要修改 HTML 的按鈕背景顏色,來搭配整體網頁風格,然而修改按鈕背景顏色最好用的就是 CSS 內建的 background-color 屬性,這個屬性是修改網頁元素背景顏色的標準功能,幾乎所有主流的瀏覽器都支援,使用方式也很簡單,就是把要修改背景顏色的 HTML 按鈕套用 background-color,再挑選自己想要使用的背景顏色即可。

語法概論概觀
background-color: 顏色設定;
CSSbackground-color 可以接受 RGB 色碼、十六進位色碼以及顏色英文單字,最好用的首推十六進位色碼,也是最多人採用的方式,各位設計師可以在我們的《色碼表》找到上百種的顏色來套用。

實際的套用範例
<input type="button" style="background-color:#FFF0D4" value="這是背景顏色為 #FFF0D4 的按鈕"><br>
<input type="button" style="background-color:#FFFF78" value="這是背景顏色為 #FFFF78 的按鈕"><br>
<input type="button" style="background-color:#FFD4D4" value="這是背景顏色為 #FFD4D4 的按鈕"><br>
<input type="button" style="background-color:#C9FFC9" value="這是背景顏色為 #C9FFC9 的按鈕"><br>
<input type="button" style="background-color:#C2C2FF" value="這是背景顏色為 #C2C2FF 的按鈕">
範例效果




在範例中,我們準備了幾個不同的背景顏色的 HTML 按鈕,全部都是透過 CSS background-color 屬性來修改,各位讀者應該有註意到,每個按鈕的語法幾乎都是一樣的,最大的差別就在所使用的色碼不同,這也是 CSS 方便的地方,按鈕套用 background-color 屬性之後,我們就可以很輕易的在《色碼表》中挑選出各式各樣不同的顏色來修改按鈕背景顏色,這樣就可以擁有許多繽紛色彩的按鈕效果。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C