W3.CSS Buttons (按钮)
W3.CSS Button 类
W3.CSS为按钮提供以下类：
| 类 | 定义 |
|---|---|
| w3-btn | 具有阴影悬停效果的矩形按钮。
默认颜色是黑色。 |
| w3-button
|
具有灰色悬停效果的矩形按钮。
在W3.CSS 3版中，默认颜色是浅灰色。在4版中， 默认颜色是从父元素继承的。 |
| w3-bar |
可用于将按钮分组在一起的水平条。
（完美的水平导航菜单） |
| w3-block
|
可用于定义全角（100％）按钮的类。 |
| w3-circle
|
可用于定义圆形按钮。 |
| w3-ripple |
可以用来产生涟漪效应。 |
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 href="https://www.w3schools.com" 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 类可以用来定义不同的文本大小：
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
按钮可以具有斜体和粗体文本效果，使用标准HTML标记（<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
全宽度按钮
要创建全宽度按钮，请将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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
禁用的按钮
按钮具有阴影效果而突出，将鼠标悬停在其上时，光标变成手形。
禁用的按钮是不透明的（半透明），并显示“禁止停车标志”。
w3-disabled 类是用来创建一个禁用按钮（如果该元素支持标准的 HTML disabled 属性，你可以改用 disabled attribute 属性）：
实例
<a class="w3-button w3-disabled" href="https://www.w3cschool.cn">链接按钮</a>
<button class="w3-button" disabled>按钮</button>
<input type="button" class="w3-button" value="Button" disabled>
<a class="w3-btn w3-disabled" href="https://www.w3cschool.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>
尝试一下 »
点击“尝试一下”按钮查看在线实例
要在同一行上显示两个（或更多）按钮栏，请添加 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-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，所有元素都可以是一个按钮：
实例
<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 类可用于创建圆形按钮：
实例
<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>
尝试一下 »
点击“尝试一下”按钮查看在线实例