W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 按钮



按钮

使用W3.CSS,所有HTML元素都可以是按钮。

但是,最常见的元素是 <input>,<button> 和 <a>:

Example

<input class="w3-btn" value="Input Button">

<button class="w3-btn">Button Button</button>

<a class="w3-btn" href="http://www.w3schools.wang">Link Button</a>
尝试一下 »

按钮颜色

您可以按照你需要的颜色来设置按钮:

Example

<button class="w3-btn w3-khaki">Khaki</button>
<button class="w3-btn w3-yellow">Yellow</button>
<button class="w3-btn w3-orange">Orange</button>
<button class="w3-btn w3-red">Red</button>
<button class="w3-btn w3-purple">Purple</button>
尝试一下 »

悬停颜色

悬停效果来自您需要的所有颜色:

Example

<button class="w3-btn w3-hover-khaki">Khaki</button>
<button class="w3-btn w3-hover-white">White</button>
<button class="w3-btn w3-hover-red">Red</button>
<button class="w3-btn w3-hover-purple">Purple</button>
尝试一下 »

按钮形状

您可以按照你需要的形状来设置按钮:

Example

<button class="w3-btn">Normal</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>
尝试一下 »

按钮尺寸

您可以按照你需要的尺寸来设置按钮:

Example

<button class="w3-btn w3-tiny">Tiny</button>
<button class="w3-btn w3-small">Small</button>
<button class="w3-btn w3-medium">Medium</button>
<button class="w3-btn w3-large">Large</button>
<button class="w3-btn w3-xlarge">xLarge</button>
尝试一下 »

按钮边框

按钮可以有边框。



Example

<button class="w3-btn w3-white w3-border">Button</button>
<button class="w3-btn w3-light-grey w3-border">Button</button>
<button class="w3-btn w3-yellow w3-border">Button</button>
<button class="w3-btn w3-white w3-border w3-round">Round</button>
<button class="w3-btn w3-white w3-border w3-round-large">Round</button>
<button class="w3-btn w3-white w3-border w3-round-xlarge">Round</button>
<button class="w3-btn w3-white w3-border w3-border-blue w3-round">Button</button>
尝试一下 »

带文本效果的按钮

按钮可以有斜体和粗体的文本效果。

Example

<button class="w3-btn">Normal</button>
<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
尝试一下 »

按钮可以具有阴影文本效果。

Example

<button class="w3-btn w3-red w3-text-shadow">Shadow</button>
<button class="w3-btn w3-red w3-text-shadow"><i>Shadow</i></button>
<button class="w3-btn w3-red w3-text-shadow"><b>Shadow</b></button>
尝试一下 »

按钮可以有薄和宽的文字效果。

Example

<button class="w3-btn">Normal</button>
<button class="w3-btn w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
尝试一下 »


块按钮

要创建块按钮,请将 w3-btn-block 类添加到元素。

块按钮宽度为100%,并跨越父元素的整个宽度:





Example

<button class="w3-btn-block">Button</button>
<button class="w3-btn-block w3-teal">Button</button>
<button class="w3-btn-block w3-red w3-left-align">Button</button>
尝试一下 »

悬停效果/禁用按钮

当您将鼠标悬停在其上时,按键会脱颖而出。

普通按钮显示手指类型。

禁用按钮是不透明的,并显示“无悬停标志”。

Example

<button class="w3-btn">Button</button>
<button class="w3-btn w3-disabled">Button</button>

<input type="button" class="w3-btn" value="Button">
<input type="button" class="w3-btn" value="Button" disabled>
尝试一下 »

按钮组

使用 "w3-btn-group" 可以将按钮组合在一起(无间隔):


Example

<div class="w3-btn-group">
  <button class="w3-btn">Button</button>
  <button class="w3-btn w3-teal">Button</button>
  <button class="w3-btn" disabled>Button</button>
</div>

<div class="w3-btn-group">
  <button class="w3-btn w3-light-grey" style="width:33.3%">One</button>
  <button class="w3-btn w3-light-grey" style="width:33.3%">Two</button>
  <button class="w3-btn w3-light-grey" style="width:33.3%">Three</button>
</div>
尝试一下 »

带波纹效果的按钮

点击按钮时,按钮会产生波纹效果:

Example

<button class="w3-btn w3-ripple">Button</button>
<button class="w3-btn w3-ripple w3-red">Button</button>
<button class="w3-btn w3-ripple w3-yellow">Button</button>
尝试一下 »

按钮元素

使用W3.CSS,所有元素都可以是一个按钮。

一张图片可以作为一个按钮

任何div,header,footer或其他容器都可以是一个按钮。


浮动按钮

w3-btn-floating 类用于创建重要功能的圆形按钮:

+ +

Example

<a class="w3-btn-floating w3-teal">+</a>
<a class="w3-btn-floating w3-disabled">+</a>
尝试一下 »

对于大型浮动按钮,请使用 w3-btn-floating-large 类:

+ +

Example

<a class="w3-btn-floating-large w3-teal">+</a>
<a class="w3-btn-floating-large w3-disabled">+</a>
尝试一下 »