HTML button 按鈕邊框樣式與顏色

HTML button 按鈕的邊框樣式與顏色都是可以修改的，用基本的 HTML 語法難以設計出美輪美奐的按鈕風格，透過 CSS 卻可以很容易的辦到，在本篇 HTML button 按鈕邊框樣式與顏色的修改介紹中，我們將會用到 CSS border 屬性其中的邊框樣式（border-style）以及邊框顏色（border-color）來製做，當然按鈕本身的寬度（width）與高度（height）也必須搭配使用，無論是 button 還是 submit 按鈕都可以用這樣的技巧，但不同的瀏覽器可能會有一點點小小的差異，這跟瀏覽器本身有關係，設計按鈕的 css 效果時，通常要多用幾個瀏覽器測試。

範例一、HTML button 按鈕邊框樣式與顏色

呈現結果

範例一中，我們準備了三個不同邊框樣式與邊框顏色的按鈕，寬度與高度都是一樣的，差別在於 css 的 border 屬性不同，第一個按鈕的邊框粗細為 2px、邊框顏色為 #9999FF、邊框樣式為虛線（dashed），第二個邊框則改用橘色（orange）的雙實線（double）樣式，第三個按鈕的邊框粗細雖然是 2px，但其實並不重要，因為邊框樣式的屬性設定為 none，所以根本不會顯示按鈕的邊框，若您對於 css 的邊框語法有興趣，可以參考這幾篇的深入介紹，尤其是 border-style 裡還有許多種立體效果的屬性相當不錯。

如果光是修改按鈕的邊框顏色與樣式無法滿足網頁整體風格，就順便連按鈕背景顏色一起修改吧！

範例二、連同 button 背景顏色一起修改

呈現結果

範例二延續範例一的程式碼，增加了 background-color 的屬性，替按鈕增加背景顏色，這裡為了讓範例比較簡潔一點，所以背景顏色都是用粉紅色（pink）呈現，你也可以自己修改為其他不同的背景顏色，更進一步了解 css 的背景顏色修改方式，請參閱這兩篇。

看完以上介紹，應該對 HTML button 按鈕的邊框樣式、顏色以及背景圖片有比較深入的認識了，以後不用再使用預設單調的按鈕風格，但還是要注意各瀏覽器所呈現效果差異，特別是 IE 常常會不一樣，如果風格差異太大，就要重新修改。

延伸閱讀