HTML button 按鈕的邊框樣式與顏色設計 - HTML 網頁設計筆記

HTML button 按鈕難道就一定樣像預設的那樣醜醜的嗎？當然不一定囉！button 的邊框樣式與顏色都是可以修改的，甚至連按鈕的背景顏色都可以修改，不過修改邊框與背景所用到的方法不太一樣，所以本篇先就按鈕的邊框樣式與顏色修改來做介紹。

傳統要修改 HTML button 的邊框有點麻煩，必須先用繪圖軟體設計好所需要的圖片，然後再套用到 HTML button 上，這樣超沒效率而且又有部份瀏覽器顯示很醜的設計方式，可以透過 CSS 的邊框屬性取而代之，CSS 設計 button 的邊框樣式與顏色可以只用一個屬性就完成，這個屬性就是 CSS 的 border 屬性，稍微來看一下 border 屬性的語法。

CSS border 屬性簡易語法

border: 粗細顏色樣式;

簡單的一個 border 屬性就可以設計出元素邊框的三項效果，分別是邊框的粗細、邊框的顏色以及邊框的樣式，是不是很厲害呢？我們只要將這個 border 屬性套用到 HTML button 上，就可以很迅速的寫出一個很漂亮的按鈕。

HTML button 按鈕的邊框樣式與顏色設計範例

功能：在新視窗開啟程式碼文字檔

範例的視覺效果

範例中使用了 CSS border 的屬性，將按鈕的邊框粗細設為 2px，顏色設為綠色（green）且樣式設為實線（solid），這三個參數都可以自由變化，例如將邊框粗細變得更細一點，就改為 1px，邊框顏色想變成紅色，就寫為 red，邊框線條的樣式想變成點點點，就寫成 dotted，風格可以自己決定，這就是利用 CSS 來設計 HTML 按鈕邊框樣式與顏色修改的標準做法。

如果你對 CSS 的 border 屬性想進一步了解，請參閱《CSS border 元素邊框設計》的內容。

更多 HTML 按鈕設計