CSS 按鈕樣式模板 CSS（層疊樣式表）是網頁設計中常用的一種樣式語言，可以通過 CSS 來掌控網頁中各種元素的外觀。在網頁設計中，按鈕是非常常用的一個元素，通過 CSS 可以輕松創建各種不同樣式的按鈕。 下面是一些常用的 CSS 按鈕樣式模板，供大家參考： 1. 默認按鈕 這是最基本的一種按鈕樣式，無特殊效果，只有鼠標懸浮時會有簡單的背景色變化。 pre{ background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } 2. 鼠標懸浮效果 這種按鈕樣式在默認按鈕樣式的基礎上加入了鼠標懸浮時的過渡效果，讓按鈕更加生動。 pre{ background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; transition-duration: 0.4s; transition-timing-function: ease-in-out; transition-property: background-color, color; } 3. 描邊按鈕 這種按鈕樣式是一個描邊按鈕，外邊框用 CSS 實現，內部填充顏色可以根據需求隨意修改。 pre{ background-color: white; border: 2px solid #4CAF50; color: #4CAF50; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } 4. 圓角按鈕 圓角按鈕是一種非常常見的按鈕樣式，在默認按鈕樣式的基礎上將按鈕的邊框圓角化。 pre{ background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 5px; } 5. 改變按鈕大小 在 CSS 中，可以通過修改 padding、font-size、甚至是 height 和 width 來改變按鈕的大小。 pre{ background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; margin: 4px 2px; cursor: pointer; } 總結 以上是一些比較常用的 CSS 按鈕樣式模板，通過修改樣式代碼中相應的屬性，可以輕松創建不同風格的按鈕。不過，在實際應用中，還需要根據具體需求進行調整和修改，使按鈕樣式更符合頁面的整體設計風格。