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="Input Button">
<button class="w3-button w3-black">Button Button</button>
<a href="https://www.w3ccoo.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.w3ccoo.com" class="w3-btn w3-black">Link Button</a>
Button Colors
所有 w3-color 类都用于给按钮添加颜色:
实例
<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-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">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-size 类可用于定义不同的文本大小:
实例
<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-border 类可用于为按钮添加边框。
w3-border-color 类用于定义边框的颜色:
实例
<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-round-size 类以添加圆角边框。
不同文字效果的按钮
按钮可以使用更宽的文字效果:
w3-wide 类增加了更宽的文本效果:
实例
<button class="w3-button">Normal</button>
<button class="w3-button w3-wide">Wide</button>
按钮可以有斜体和粗体文本效果：
使用标准 HTML 标签 (<i> 和 <b>) 为按钮文本添加斜体或粗体效果:
实例
<button class="w3-button"><i>Italic</i></button>
<button class="w3-button"><b>Bold</b></button>
带内边距的按钮
w3-padding-size 类用于在按钮文本周围添加额外的填充:
实例
<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-block 类添加到按钮。
全宽按钮的宽度为 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-left-align 类或 w3-right-align 类对齐。
a 块的大小可以使用 style="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>
禁用按钮
按钮以阴影效果突出，当鼠标悬停在按钮上时，光标会变成手。
禁用按钮是不透明的（半透明的）并显示"禁止停车标志"：
w3-disabled 类用于创建禁用按钮（如果元素支持标准的 HTML disabled 属性，则可以使用 disabled 属性代替）:
实例
<a class="w3-button w3-disabled" href="https://www.w3ccoo.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.w3ccoo.com">Link Button</a>
<button class="w3-btn" disabled>Button</button>
<input type="button" class="w3-btn" value="Button" disabled>
按钮栏
可以使用 w3-bar 类将按钮组合在一个水平栏中:
实例
<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-bar-item 类将按钮组合在一起，它们之间没有空格:
实例
<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-center 类居中:
实例
<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-show-inline-block 类:
实例
<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>
可以使用 style="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-left 类和.w3-right 类将按钮向左或向右浮动:
用于创建 "上一个/下一个" 按钮:
实例
<div class="w3-bar">
<button class="w3-button w3-left">Left</button>
<button class="w3-button w3-right">Right</button>
</div>
具有波纹效果的按钮
w3-ripple 类在按钮上创建涟漪效果（当它们被点击时）:
实例
<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-button
一张图片可以是一个w3-btn
任何 div、页眉、页脚或其他容器都可以是 w3-btn！
圆形按钮
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>
