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

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

語法概論概觀
background-color: 顏色設定;
CSS 的 background-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