纽扣
随着W3.CSS，所有的HTML元素可以是按钮。
但最常见的元素是<输入>，<按钮>和<A>：
例
<input class="w3-btn" value="Input Button">
<button class="w3-btn">Button Button</button>
<a class="w3-btn"
href="http://www.w3ii.com">Link Button</a> 试一试» 按钮颜色
按钮进来你需要的所有颜色：
例
<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> 试一试» 哈弗颜色
悬停进来你需要的所有颜色效果：
例
<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> 试一试» 的按钮形状
按钮进来你所需要的各种形状：
例
<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>
试一试» 按钮大小
按钮进来，你需要的所有尺寸：
例
<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>
试一试» 按钮边框
按钮可以有边界。
例
<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>
试一试» 与文字效果按钮
按钮可以有斜体和大胆的文字效果。
例
<button class="w3-btn">Normal</button>
<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
试一试» 按钮可以有阴影的文字效果。
例
<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>
试一试» 按钮可以拥有苗条的和广泛的文字效果。
例
<button class="w3-btn">Normal</button>
<button class="w3-btn
w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
试一试» 全宽按钮
要创建一个全宽按键，W3-BTN块类添加到的元素。
全宽按钮具有100％的宽度，并跨越父元素的整个宽度：
例
<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> 试一试» 哈弗效果/禁用的按钮
按钮中脱颖而出，当你鼠标移到他们。
普通按钮显示手指指针。
禁用按钮是不透明的，并显示“没有停车标志”。
例
<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-组”（中间没有空格）：
例
<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>
试一试» 有涟漪效应按钮
按钮可以有涟漪效应被点击时：
例
<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，所有元件可以是一个按钮。
图片可以是一个按钮
任何股利，页眉，页脚或其他容器可以是一个按钮。
浮动按钮
在W3-BTN-浮动班，创建了旨在为重要的功能按钮，圆形：
使用W3-BTN-浮动大型类大型浮按钮：
例
<a class="w3-btn-floating-large w3-teal">+</a>
<a
class="w3-btn-floating-large w3-disabled">+</a>
试一试»