HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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-button！



任何 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>

亲自试一试 »


❮ 上一节 下一节 ❯