HTML button 按鈕

HTML button 按鈕的應用相當的廣泛,除了可以用來做為表單的送出之外,還可以用來做些特效讓網友互動,而很早就出現的 HTML button 功能,也隨著網路應用的發展,結合 JavaScript 的事件觸發更多有趣的功能,透過網頁設計師的巧思,讓一個簡單的按鈕變得更不簡單,除此之外,後來流行的 CSS 語法更讓傳統陽春的按鈕更加美化,以下準備了一些 HTML Button 的簡單範例參考。

HTML button 按鈕基本語法

<button type="button">我是按鈕</button>



另外一種常見於表單的寫法是透過 <input> 標籤來寫

<input type="button" value="我是按鈕">



這兩種寫法看似結果相同,但用起來可不一樣,在 HTML 中要做出圖片式按鈕的特效,就必須使用 <button> 標籤,在 CSS 中就不一定。製作圖片型按鈕需先了解圖片的用法,請參考:HTML 圖片插入或加入連結語法

HTML button 圖片型按鈕範例

<button type="button"><img src="圖片網址"></button>



HTML button 超連結按鈕範例

<input type="button" value="連結名稱" onclick="location.href='要前往的網頁連結'">



這裡用到的 onclick 語法是 JavaScript 的功能,意思是當滑鼠按下按鈕的時候,會做什麼樣的動作,在這裡我們就將 local.href='要連結的網址' 加入事件中,讓用戶觸發按鈕的功能後,前往要去的目標網頁,請注意單引號與雙引號的應用,避免瀏覽器判讀錯誤。

HTML button 的大小設計
設定 button 按鈕寬度、高度與文字大小

<input type="button" value="我是按鈕" style="width:120px;height:40px;font-size:20px;">



這個範例採用了 CSS 語法中的寬度(width)、高度(height)以及文字大小(font-size)來設定按鈕的規格,除此之外 CSS 還有很多規則可以讓你美化按鈕,例如背景色(background-color)、邊框(border)、漸層、文字字型(font-family)... 等。

用 css 技巧修改按鈕的邊框也有很好的效果,請參閱:HTML button 按鈕邊框樣式與顏色

HTML button 有可能的値與屬性
  • disabled - 不能夠動作的按鈕,僅能看不能按。
  • name - 按鈕的名稱
  • type - 按鈕的類型,有 button(單純按鈕)、reset(清空表單)、submit(送出表單)
  • value - 就是按鈕的値
延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012