免費(fèi)AI編程助手
W3.CSS Buttons (按鈕)
W3.CSS Button 類
W3.CSS為按鈕提供以下類：
| 類 | 定義 |
|---|---|
| w3-btn | 具有陰影懸停效果的矩形按鈕。
默認(rèn)顏色是黑色。 |
| w3-button
|
具有灰色懸停效果的矩形按鈕。
在W3.CSS 3版中，默認(rèn)顏色是淺灰色。在4版中， 默認(rèn)顏色是從父元素繼承的。 |
| w3-bar |
可用于將按鈕分組在一起的水平條。
（完美的水平導(dǎo)航菜單） |
| w3-block
|
可用于定義全角（100％）按鈕的類。 |
| w3-circle
|
可用于定義圓形按鈕。 |
| w3-ripple |
可以用來產(chǎn)生漣漪效應(yīng)。 |
Buttons
w3-button 類和 w3-btn 類都向任何 HTML 元素添加按鈕行為。
最常用的元素有<input type=“button”>、<button>和<a>：
實例
<input class="w3-button w3-black" type="button" value="Input Button">
<button class="w3-button w3-black">按鈕按鈕</button>
<a rel="external nofollow" target="_blank" class="w3-button w3-black">鏈接按鈕</a>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
按鈕顏色
所有 w3-color 類別都用于向按鈕添加顏色：
實例
<button class="w3-button w3-black">Black</button>
<button class="w3-button w3-khaki">Khaki</button>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
懸停顏色
w3-hover-color 類用于懸停顏色添加到按鈕：
實例
<button class="w3-button w3-hover-black">Black</button>
<button class="w3-button w3-hover-red">Red</button>
<button class="w3-button w3-hover-purple">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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
按鈕尺寸
w3-size 類可以用來定義不同的文本大?。?/p>
實例
<button class="w3-button w3-tiny">特小</button>
<button class="w3-button w3-small">小</button>
<button class="w3-button w3-medium">中</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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
提示：添加w3-round- size類以添加圓角邊框。
具有不同文字效果的按鈕
w3-wide 類增加了一個更廣泛的文本效果：
實例
<button class="w3-button">正常按鈕</button>
<button class="w3-button w3-wide">寬文本按鈕</button>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
按鈕可以具有斜體和粗體文本效果，使用標(biāo)準(zhǔn)HTML標(biāo)記（<i>和<b>）為按鈕文本添加斜體或粗體效果：
實例
<button class="w3-button"><i>文字顯示斜體</i></button>
<button class="w3-button"><b>文字顯示粗體</b></button>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
帶填充按鈕
w3-padding-size 類是用來添加按鈕周圍的文本效果：
實例
<button class="w3-button w3-padding-small">按鈕</button>
<button class="w3-button">按鈕</button>
<button class="w3-button w3-padding-large">按鈕</button>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
全寬度按鈕
要創(chuàng)建全寬度按鈕，請將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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
提示：將按鈕文本與 w3-left-align 類或 w3-right-align 右對齊類對齊。
可以使用 style =“ width：”定義 a 塊的大小。
實例
<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
禁用的按鈕
按鈕具有陰影效果而突出，將鼠標(biāo)懸停在其上時，光標(biāo)變成手形。
禁用的按鈕是不透明的（半透明），并顯示“禁止停車標(biāo)志”。
w3-disabled 類是用來創(chuàng)建一個禁用按鈕（如果該元素支持標(biāo)準(zhǔn)的 HTML disabled 屬性，你可以改用 disabled attribute 屬性）：
實例
<a class="w3-button w3-disabled" href="http://hgci.cn">鏈接按鈕</a>
<button class="w3-button" disabled>按鈕</button>
<input type="button" class="w3-button" value="Button" disabled>
<a class="w3-btn w3-disabled" href="http://hgci.cn">鏈接按鈕</a>
<button class="w3-btn" disabled>按鈕</button>
<input type="button" class="w3-btn" value="Button" 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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
要在同一行上顯示兩個（或更多）按鈕欄，請?zhí)砑?nbsp;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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
導(dǎo)航欄
按鈕欄可以輕松用作導(dǎo)航欄：
實例
<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：”定義每個項目的大?。?/p>
實例
<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>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
提示：您將在本教程的后面部分詳細(xì)了解導(dǎo)航。
左右按鈕
使用 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 類創(chuàng)建的按鈕漣漪效應(yīng)（當(dāng)他們點擊時）：
實例
<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，所有元素都可以是一個按鈕：
實例
<div class="w3-button w3-white w3-ripple" style="margin:0;padding:0">
<img src="img_snowtops.jpg" style="width:100%">
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">圖片可以是 w3 按鈕</font></font></p>
</div>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
圓形按鈕
w3-circle 類可用于創(chuàng)建圓形按鈕：
實例
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
實例
<button class="w3-button w3-black">+</button>
<button class="w3-button w3-teal">+</button>
嘗試一下 ?
點擊“嘗試一下”按鈕查看在線實例
更多建議：