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.org.cn" 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.org.cn" 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.org.cn">链接按钮</a>
<button class="w3-button" disabled>按钮</button>
<input type="button" class="w3-button" value="按钮" disabled>
<a class="w3-btn w3-disabled" href="https://w3schools.org.cn">链接按钮</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>
方形按钮
