W3.CSS 按钮
W3.CSS 按钮类
W3.CSS 为按钮提供了以下类：
| 类 | 定义 |
|---|---|
| w3按钮 | 具有阴影悬停效果的矩形按钮。 默认颜色为黑色。 |
| w3按钮 | 具有灰色悬停效果的矩形按钮。 W3.CSS 版本 3 中的默认颜色为浅灰色。 在版本 4 中，默认颜色继承自父元素。 |
| w3-酒吧 | 可用于将按钮分组在一起的水平条。 （非常适合水平导航菜单） |
| w3块 | 可用于定义全宽 (100%) 按钮的类。 |
| w3-圆 | 可用于定义圆形按钮。 |
| w3-波纹 | 可用于创建连锁反应。 |
按钮
这俩w3按钮类和w3按钮类将按钮行为添加到任何 HTML 元素。
最常用的元素是 <input type="button">、<button> 和 <a>：
示例
<input class="w3-button w3-black" type="button" value="Input Button">
<button class="w3-button w3-black">Button Button</button>
<a href="https://www.91xjr.com" class="w3-button w3-black">Link Button</a>
<input class="w3-btn w3-black" type="button" value="Input Button">
<button class="w3-btn w3-black">Button Button</button>
<a href="https://www.91xjr.com" class="w3-btn w3-black">Link Button</a>
按钮颜色
一切w3-颜色类用于为按钮添加颜色：
示例
<button class="w3-button w3-black">Black</button>
<button class="w3-button w3-khaki">Khaki</button>
<button class="w3-button w3-yellow">Yellow</button>
<button class="w3-button w3-red">Red</button>
<button class="w3-button w3-purple">Purple</button>
悬停颜色
悬停效果也有各种颜色。这里有一些：
这个w3-悬停-颜色类用于为按钮添加悬停颜色：
示例
<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-轮-尺寸类用于为按钮添加圆角边框：
示例
<button class="w3-button w3-round">Round</button>
<button class="w3-button w3-round-large">Rounder</button>
<button class="w3-button w3-round-xlarge">and Rounder</button>
<button class="w3-button w3-round-xxlarge">and Rounder</button>
<button class="w3-btn w3-round">Round</button>
<button class="w3-btn w3-round-large">Rounder</button>
<button class="w3-btn w3-round-xlarge">and Rounder</button>
<button class="w3-btn w3-round-xxlarge">and Rounder</button>
亲自试一试»
按钮尺寸
这个w3-尺寸类可用于定义不同的文本大小：
示例
<button class="w3-button w3-tiny">Tiny</button>
<button class="w3-button w3-small">Small</button>
<button class="w3-button w3-medium">Medium</button>
<button class="w3-button w3-large">Large</button>
<button class="w3-button w3-xlarge">xLarge</button>
<button class="w3-button w3-xxlarge">XXLarge</button>
<button class="w3-button w3-xxxlarge">XXXLarge</button>
<button class="w3-button w3-jumbo">Jumbo</button>
按钮边框
这个w3边框类可用于为按钮添加边框。
这个w3-边框-颜色类用于定义边框的颜色：
示例
<button class="w3-button w3-white w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-blue">Button</button>
<button class="w3-button w3-yellow w3-border">Button</button>
<button class="w3-button w3-white w3-border w3-border-red w3-round-large">Button</button>
提示：添加w3-轮-尺寸类添加圆角边框。
具有不同文字效果的按钮
按钮可以使用更宽的文字效果：
这个w3 宽类添加了更宽的文本效果：
按钮可以具有斜体和粗体文本效果：
使用标准 HTML 标签（<i> 和 <b>）为按钮文本添加斜体或粗体效果：
示例
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
带填充的按钮
这个w3-填充-尺寸类用于在按钮文本周围添加额外的填充：
示例
<button class="w3-button w3-padding-small">Button</button>
<button class="w3-button">Button</button>
<button class="w3-button w3-padding-large">Button</button>
<button class="w3-btn w3-padding-small">Button</button>
<button class="w3-btn">Button</button>
<button class="w3-btn w3-padding-large">Button</button>
全角按钮
要创建全角按钮，请添加w3块按钮的类。
全角按钮的宽度为 100%，并且跨越父元素的整个宽度：
示例
<button class="w3-button w3-block">Button</button>
<button class="w3-button w3-block w3-teal">Button</button>
<button class="w3-button w3-block w3-red w3-left-align">Button</button>
<button class="w3-btn w3-block">Button</button>
<button class="w3-btn w3-block w3-teal">Button</button>
<button class="w3-btn w3-block w3-red w3-left-align">Button</button>
提示：将按钮文本与w3-左对齐类或w3-右对齐类。
a 块的大小可以使用定义样式="width:"。
示例
<button class="w3-button w3-block w3-black" style="width:30%">Button</button>
<button class="w3-button w3-block w3-teal" style="width:50%">Button</button>
<button class="w3-button w3-block w3-red" style="width:80%">Button</button>
禁用按钮
按钮具有阴影效果，当鼠标悬停在按钮上时，光标会变成手形。
禁用的按钮是不透明（半透明）并显示"no parking sign"：
这个w3-禁用类用于创建禁用按钮（如果元素支持标准 HTML 禁用属性，则可以使用禁用属性代替）：
示例
<a class="w3-button w3-disabled" href="https://www.91xjr.com">Link Button</a>
<button class="w3-button" disabled>Button</button>
<input type="button" class="w3-button" value="Button" disabled>
<a class="w3-btn w3-disabled" href="https://www.91xjr.com">Link Button</a>
<button class="w3-btn" disabled>Button</button>
<input type="button" class="w3-btn" value="Button" disabled>
按钮栏
可以使用以下命令将按钮分组到水平栏中w3-酒吧类：
示例
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-red">Button</button>
</div>
w3-bar 类在 W3.CSS 版本 2.93 / 2.94 中引入。
按钮可以通过使用分组在一起，并且它们之间没有空格w3 栏项目类：
示例
<div class="w3-bar">
<button class="w3-bar-item w3-button w3-black">Button</button>
<button class="w3-bar-item w3-button w3-teal">Button</button>
<button class="w3-bar-item w3-button w3-red">Button</button>
</div>
按钮栏可以使用以下命令居中w3-中心类：
示例
<div class="w3-center">
<div class="w3-bar">
<button class="w3-button w3-black">Button</button>
<button class="w3-button w3-teal">Button</button>
<button class="w3-button w3-disabled">Button</button>
</div>
</div>
要在同一行显示两个（或更多）按钮栏，请添加w3-显示内联块类：
示例
<div class="w3-show-inline-block">
<div class="w3-bar">
<button class="w3-btn">Button</button>
<button class="w3-btn w3-teal">Button</button>
<button class="w3-btn w3-disabled">Button</button>
</div>
</div>
<div class="w3-show-inline-block">
<div class="w3-bar">
<button class="w3-btn">Button</button>
<button class="w3-btn w3-teal">Button</button>
<button class="w3-btn w3-disabled">Button</button>
</div>
</div>
导航栏
按钮栏可以轻松用作导航栏：
示例
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button">Button</button>
<button class="w3-bar-item w3-button">Button</button>
<button class="w3-bar-item w3-button">Button</button>
</div>
每个项目的大小可以通过使用来定义样式="width:"：
示例
<div class="w3-bar">
<button class="w3-bar-item w3-button" style="width:33.3%">Button</button>
<button class="w3-bar-item w3-button w3-teal" style="width:33.3%">Button</button>
<button class="w3-bar-item w3-button w3-red" style="width:33.3%">Button</button>
</div>
您将在本教程后面了解有关导航的更多信息。
左、右按钮
使用.w3-左类和.w3-右类将按钮浮动到左侧或右侧：
用于创建 "previous/next" 按钮：
示例
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
具有波纹效果的按钮
这个w3-波纹类在按钮上创建连锁反应（当单击按钮时）：
示例
<button class="w3-button w3-ripple">Button</button>
<button class="w3-button w3-ripple w3-red">Button</button>
<button class="w3-button w3-ripple w3-yellow">Button</button>
所有元素都可以是按钮
使用 W3.CSS，所有元素都可以是按钮：
图片可以是 w3 按钮
图片可以是w3-btn
任何 div、页眉、页脚或其他容器都可以是w3按钮！
圆形按钮
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>