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

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

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

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

更多 HTML 按鈕設計

• 替 HTML button 按鈕增加背景圖片
• HTML button 按鈕邊框樣式與顏色
• 利用 CSS 修改 HTML 按鈕背景顏色
• 用 CSS 修改 HTML button 按鈕文字顏色

您可能會想看

• CSS span 區域文字字型設計
• CSS span 區域邊框顏色與樣式設計
• CSS span 區域背景顏色設計
• CSS display:inline-block 效果
• CSS a 連結樣式效果設計
• 用 CSS 設計出三角形圖案
• CSS display 屬性
• CSS box model 盒子模型
• CSS list-style 列表屬性
• 用 CSS 修改 HTML button 按鈕文字顏色

今日熱門文章

• 認識 PHP8 的基本結構與語法
• Notepad++ 簡介及下載安裝，非常適合寫 PHP 的程式碼編輯器
• 選擇 PHP 程式碼編輯軟體
• 在 Windows 11 上安裝 XAMPP 建置 PHP 開發環境
• PHP8 簡介
• 用 javascript let 宣告變數跟 var 有什麼不同？
• javascript 三個等號 === 是什麼意思？跟兩個等號有什麼不同？
• MySQL SELECT WHERE date 等於上個月的條件判斷寫法
• MySQL SELECT WHERE date 等於本月的條件判斷寫法
• MySQL SELECT WHERE date 等於昨天的條件判斷寫法

即時熱門文章

• 認識 PHP8 的基本結構與語法
• Notepad++ 簡介及下載安裝，非常適合寫 PHP 的程式碼編輯器
• 選擇 PHP 程式碼編輯軟體
• 在 Windows 11 上安裝 XAMPP 建置 PHP 開發環境
• PHP8 簡介
• 用 javascript let 宣告變數跟 var 有什麼不同？
• javascript 三個等號 === 是什麼意思？跟兩個等號有什麼不同？
• MySQL SELECT WHERE date 等於上個月的條件判斷寫法
• MySQL SELECT WHERE date 等於本月的條件判斷寫法
• MySQL SELECT WHERE date 等於昨天的條件判斷寫法