用 CSS 設計 HTML button 按鈕大小

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

HTML button 按鈕語法
<input type="button" value="按鈕值" name="按鈕名稱" style="按鈕樣式">
以上是標準的 HTML button 按鈕設計語法,最後面那個 style 就是用來宣告一段 CSS 的樣式語法,本篇就是要利用那個 style 來宣告 widthheight 屬性,藉此來設計按鈕大小,請看範例的程式碼與實際效果。

關於按鈕的介紹,請參閱《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;">
範例的效果
我們在範例中準備了三個按鈕,並透過 CSSwidthheight 屬性分別調整它們的大小,由左而右可以很清楚的看到三個按鈕大小的呈現結果,按鈕的顯示文字(value)都會垂直置中,所以不用擔心調整了按鈕大小造成文字跑掉的問題。

更多 HTML 按鈕設計
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C