用 CSS 設計 HTML button 按鈕大小

HTML button 按鈕的大小可以透過 CSS 內建的 width 與 height 這兩個屬性，分別來控制按鈕的寬度與高度，精準得設計出我們所需要的按鈕大小，比傳統的 HTML 對按鈕大小的控制來的更準確，我們這裡先來複習一下 HTML button 按鈕語法，再來套用 CSS 重新設計按鈕大小，本篇的範例是按鈕大小設計的標準技巧，受到所有主流的瀏覽器支援。

HTML button 按鈕語法

<input type="button" value="按鈕值" name="按鈕名稱" style="按鈕樣式">

以上是標準的 HTML button 按鈕設計語法，最後面那個 style 就是用來宣告一段 CSS 的樣式語法，本篇就是要利用那個 style 來宣告 width 與 height 屬性，藉此來設計按鈕大小，請看範例的程式碼與實際效果。

關於按鈕的介紹，請參閱《HTML button 按鈕》篇的詳細解說。

用 CSS 設計 HTML button 按鈕大小範例

<input type="button" value="按鈕值" name="按鈕名稱" style="width:100px;height:30px;">
<input type="button" value="按鈕值" name="按鈕名稱" style="width:120px;height:40px;">
<input type="button" value="按鈕值" name="按鈕名稱" style="width:140px;height:50px;">

範例的效果

  

我們在範例中準備了三個按鈕，並透過 CSS 的 width 與 height 屬性分別調整它們的大小，由左而右可以很清楚的看到三個按鈕大小的呈現結果，按鈕的顯示文字（value）都會垂直置中，所以不用擔心調整了按鈕大小造成文字跑掉的問題。