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">超特大</button>
<button class="w3-button w3-xxxlarge">超超特大</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>
方形按钮
