HTML button 按鈕邊框樣式與顏色

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

範例一、HTML button 按鈕邊框樣式與顏色
<input type="button" value="我是按鈕" style="width:120px;height:40px;border:2px #9999FF dashed;">
<input type="button" value="我是按鈕" style="width:120px;height:40px;border:3px orange double;">
<input type="button" value="我是按鈕" style="width:120px;height:40px;border:2px blue none;">
呈現結果
範例一中,我們準備了三個不同邊框樣式與邊框顏色的按鈕,寬度與高度都是一樣的,差別在於 css 的 border 屬性不同,第一個按鈕的邊框粗細為 2px、邊框顏色為 #9999FF、邊框樣式為虛線(dashed),第二個邊框則改用橘色(orange)的雙實線(double)樣式,第三個按鈕的邊框粗細雖然是 2px,但其實並不重要,因為邊框樣式的屬性設定為 none,所以根本不會顯示按鈕的邊框,若您對於 css 的邊框語法有興趣,可以參考這幾篇的深入介紹,尤其是 border-style 裡還有許多種立體效果的屬性相當不錯。
如果光是修改按鈕的邊框顏色與樣式無法滿足網頁整體風格,就順便連按鈕背景顏色一起修改吧!

範例二、連同 button 背景顏色一起修改
<input type="button" value="我是按鈕" style="width:120px;height:40px;border:2px #9999FF dashed;background-color:pink;">
<input type="button" value="我是按鈕" style="width:120px;height:40px;border:3px orange double;background-color:pink;">
<input type="button" value="我是按鈕" style="width:120px;height:40px;border:2px blue none;background-color:pink;">
呈現結果
範例二延續範例一的程式碼,增加了 background-color 的屬性,替按鈕增加背景顏色,這裡為了讓範例比較簡潔一點,所以背景顏色都是用粉紅色(pink)呈現,你也可以自己修改為其他不同的背景顏色,更進一步了解 css 的背景顏色修改方式,請參閱這兩篇。
看完以上介紹,應該對 HTML button 按鈕的邊框樣式、顏色以及背景圖片有比較深入的認識了,以後不用再使用預設單調的按鈕風格,但還是要注意各瀏覽器所呈現效果差異,特別是 IE 常常會不一樣,如果風格差異太大,就要重新修改。

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