W3.CSS 按鈕
W3.CSS 按鈕類
W3.CSS 提供了以下按鈕類
| 類 | 定義 |
|---|---|
| w3-btn | 帶有陰影懸停效果的矩形按鈕。 預設顏色為黑色。 |
| w3-button | 帶有灰色懸停效果的矩形按鈕。 W3.CSS 版本 3 中預設顏色為淺灰色。 版本 4 中預設顏色從父元素繼承。 |
| w3-bar | 一個可用於組合按鈕的水平欄。 (非常適合水平導航選單) |
| w3-block | 可用於定義全寬 (100%) 按鈕的類。 |
| w3-circle | 可用於定義圓形按鈕。 |
| w3-ripple | 可用於建立漣漪效果。 |
按鈕
w3-button 類和 w3-btn 類都為任何 HTML 元素添加了按鈕行為。
最常用的元素是 <input type="button">, <button>, 和 <a>
示例
<input class="w3-button w3-black" type="button" value="輸入按鈕">
<button class="w3-button w3-black">按鈕</button>
<a href="https://w3schools.tw" class="w3-button w3-black">連結按鈕</a>
<input class="w3-btn w3-black" type="button" value="輸入按鈕">
<button class="w3-btn w3-black">按鈕</button>
<a href="https://w3schools.tw" class="w3-btn w3-black">連結按鈕</a>
按鈕顏色
所有 w3-color 類都用於為按鈕新增顏色
示例
<button class="w3-button w3-black">黑色</button>
<button class="w3-button w3-khaki">卡其色</button>
<button class="w3-button w3-yellow">黃色</button>
<button class="w3-button w3-red">紅色</button>
<button class="w3-button w3-purple">紫色</button>
懸停顏色
懸停效果也有所有顏色。這裡有一些
w3-hover-color 類用於為按鈕新增懸停顏色
示例
<button class="w3-button w3-hover-black">黑色</button>
<button class="w3-button w3-hover-red">紅色</button>
<button class="w3-button w3-hover-purple">紫色</button>
按鈕形狀
w3-round-size 類用於為按鈕新增圓角邊框
示例
<button class="w3-button w3-round">圓角</button>
<button class="w3-button w3-round-large">更圓</button>
<button class="w3-button w3-round-xlarge">和更圓</button>
<button class="w3-button w3-round-xxlarge">和更圓</button>
<button class="w3-btn w3-round">圓角</button>
<button class="w3-btn w3-round-large">更圓</button>
<button class="w3-btn w3-round-xlarge">和更圓</button>
<button class="w3-btn w3-round-xxlarge">和更圓</button>
自己試試 »
按鈕大小
w3-size 類可用於定義不同的文字大小
示例
<button class="w3-button w3-tiny">微小</button>
<button class="w3-button w3-small">小</button>
<button class="w3-button w3-medium">中</button>
<button class="w3-button w3-large">大</button>
<button class="w3-button w3-xlarge">特大</button>
<button class="w3-button w3-xxlarge">XX大</button>
<button class="w3-button w3-xxxlarge">XXX大</button>
<button class="w3-button w3-jumbo">巨型</button>
按鈕邊框
w3-border 類可用於為按鈕新增邊框。
w3-border-color 類用於定義邊框的顏色
示例
<button class="w3-button w3-white w3-border">按鈕</button>
<button class="w3-button w3-white w3-border w3-border-blue">按鈕</button>
<button class="w3-button w3-yellow w3-border">按鈕</button>
<button class="w3-button w3-white w3-border w3-border-red w3-round-large">按鈕</button>
提示：新增 w3-round-size 類以新增圓角邊框。
具有不同文字效果的按鈕
按鈕可以使用更廣泛的文字效果
w3-wide 類添加了更寬的文字效果
按鈕可以具有斜體和粗體文字效果
使用標準的 HTML 標籤（<i> 和 <b>）為按鈕文字新增斜體或粗體效果
按鈕內邊距
w3-padding-size 類用於在按鈕文本週圍新增額外的內邊距
示例
<button class="w3-button w3-padding-small">按鈕</button>
<button class="w3-button">按鈕</button>
<button class="w3-button w3-padding-large">按鈕</button>
<button class="w3-btn w3-padding-small">按鈕</button>
<button class="w3-btn">按鈕</button>
<button class="w3-btn w3-padding-large">按鈕</button>
全寬按鈕
要建立全寬按鈕，請將 w3-block 類新增到按鈕。
全寬按鈕的寬度為 100%，跨越父元素的整個寬度
示例
<button class="w3-button w3-block">按鈕</button>
<button class="w3-button w3-block w3-teal">按鈕</button>
<button class="w3-button w3-block w3-red w3-left-align">按鈕</button>
<button class="w3-btn w3-block">按鈕</button>
<button class="w3-btn w3-block w3-teal">按鈕</button>
<button class="w3-btn w3-block w3-red w3-left-align">按鈕</button>
提示：使用 w3-left-align 類或 w3-right-align 類對齊按鈕文字。
塊的大小可以使用 style="width:" 定義。
示例
<button class="w3-button w3-block w3-black" style="width:30%">按鈕</button>
<button class="w3-button w3-block w3-teal" style="width:50%">按鈕</button>
<button class="w3-button w3-block w3-red" style="width:80%">按鈕</button>
停用的按鈕
按鈕帶有陰影效果，滑鼠懸停時游標會變成手型。
停用的按鈕是不透明的（半透明）並顯示“禁止停車標誌”
w3-disabled 類用於建立停用按鈕（如果元素支援標準的 HTML disabled 屬性，則可以使用 disabled 屬性代替）
示例
<a class="w3-button w3-disabled" href="https://w3schools.tw">連結按鈕</a>
<button class="w3-button" disabled>按鈕</button>
<input type="button" class="w3-button" value="按鈕" disabled>
<a class="w3-btn w3-disabled" href="https://w3schools.tw">連結按鈕</a>
<button class="w3-btn" disabled>按鈕</button>
<input type="button" class="w3-btn" value="按鈕" disabled>
按鈕條
可以使用 w3-bar 類將按鈕分組到水平條中
示例
<div class="w3-bar">
<button class="w3-button w3-black">按鈕</button>
<button class="w3-button w3-teal">按鈕</button>
<button class="w3-button w3-red">按鈕</button>
</div>
w3-bar 類在 W3.CSS 版本 2.93 / 2.94 中引入。
可以透過使用 w3-bar-item 類將按鈕分組，中間沒有空格
示例
<div class="w3-bar">
<button class="w3-bar-item w3-button w3-black">按鈕</button>
<button class="w3-bar-item w3-button w3-teal">按鈕</button>
<button class="w3-bar-item w3-button w3-red">按鈕</button>
</div>
可以使用 w3-center 類來居中按鈕條
示例
<div class="w3-center">
<div class="w3-bar">
<button class="w3-button w3-black">按鈕</button>
<button class="w3-button w3-teal">按鈕</button>
<button class="w3-button w3-disabled">按鈕</button>
</div>
</div>
要在同一行顯示兩個（或更多）按鈕條，請新增 w3-show-inline-block 類
示例
<div class="w3-show-inline-block">
<div class="w3-bar">
<button class="w3-btn">按鈕</button>
<button class="w3-btn w3-teal">按鈕</button>
<button class="w3-btn w3-disabled">按鈕</button>
</div>
</div>
<div class="w3-show-inline-block">
<div class="w3-bar">
<button class="w3-btn">按鈕</button>
<button class="w3-btn w3-teal">按鈕</button>
<button class="w3-btn w3-disabled">按鈕</button>
</div>
</div>
導航欄
按鈕條可以輕鬆用作導航條
示例
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button">按鈕</button>
<button class="w3-bar-item w3-button">按鈕</button>
<button class="w3-bar-item w3-button">按鈕</button>
</div>
每個專案的大小可以透過使用 style="width:" 來定義
示例
<div class="w3-bar">
<button class="w3-bar-item w3-button" style="width:33.3%">按鈕</button>
<button class="w3-bar-item w3-button w3-teal" style="width:33.3%">按鈕</button>
<button class="w3-bar-item w3-button w3-red" style="width:33.3%">按鈕</button>
</div>
在本教程的後面，你將學到更多關於導航的內容。
左對齊和右對齊按鈕
使用 .w3-left 類和 .w3-right 類將按鈕浮動到左側或右側
用於建立“上一個/下一個”按鈕
示例
<div class="w3-bar">
<button class="w3-button w3-left">左</button>
<button class="w3-button w3-right">右</button>
</div>
帶漣漪效果的按鈕
w3-ripple 類會在按鈕上建立漣漪效果（點選時）
示例
<button class="w3-button w3-ripple">按鈕</button>
<button class="w3-button w3-ripple w3-red">按鈕</button>
<button class="w3-button w3-ripple w3-yellow">按鈕</button>
所有元素都可以是按鈕
使用 W3.CSS，所有元素都可以是按鈕
圖片可以是 w3-button
圖片可以是 w3-btn
任何 div、header、footer 或其他容器都可以是 w3-btn！
圓形按鈕
w3-circle 類可用於建立圓形按鈕
示例
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>
方形按鈕
