A picture can be a button
W3.CSS では、w3-btn を使用して、すべての HTML 要素をボタンにすることができます。
しかし、最も一般的な要素は、<input>, <button>, <a> です：
<input class="w3-btn" value="Input Button">
<button class="w3-btn">Button Button</button>
<a class="w3-btn"
href="http://www.w3schools.com">Link Button</a>
Try It Yourself ❯
ボタンには、必要とするすべての色があります：
<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>
Try It Yourself ❯
ホバー色には、必要とするすべての色があります：
<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>
Try It Yourself ❯
ボタンには、必要とするすべての形があります：
<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>
Try It Yourself ❯
ボタンには、必要とするすべてのサイズがあります：
<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>
Try It Yourself ❯
ボタンには、ボーダーを指定することができます。
<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>
Try It Yourself ❯
ボタンには、イタリック体と太字のテキスト効果を指定することができます。
<button class="w3-btn">Normal</button>
<button class="w3-btn"><i>Italic</i></button>
<button class="w3-btn"><b>Bold</b></button>
Try It Yourself ❯
ボタンには、影付きのテキスト効果を指定することができます。
<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>
Try It Yourself ❯
ボタンには、slim と wide のテキスト効果（字間値？）を指定することができます。
<button class="w3-btn">Normal</button>
<button class="w3-btn
w3-slim">Slim</button>
<button class="w3-btn w3-wide">Wide</button>
Try It Yourself ❯
パディング付きのボタンを作るには、ボタンに w3-padding クラスを追加します。
<button class="w3-btn w3-padding-large">Button</button>
<button class="w3-btn w3-padding-xlarge">Button</button>
<button class="w3-btn w3-padding-xxlarge">Button</button>
Try It Yourself ❯
全幅サイズのボタンを作成するには、要素に w3-btn-block クラスを追加します。
全幅サイズのボタンは、幅が 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>
Try It Yourself ❯
ボタンの上にマウスのせたときに影を付けて目立つようにします。
通常のボタンでは、指の形をしたポインタを表示します。
無効なボタンでは、不透明な「駐車禁止記号」を表示します。
<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>
Try It Yourself ❯
ボタンは、"w3-btn-group" を使用することで、まとめてグループ化することができます（間にスペースは入りません）：
<div class="w3-btn-group">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
<div
class="w3-btn-group">
<button class="w3-btn"
style="width:33.3%">Button</button>
<button class="w3-btn
w3-teal" style="width:33.3%">Button</button>
<button
class="w3-btn w3-disabled" style="width:33.3%">Button</button>
</div>
Try It Yourself ❯
2 つのボタングループを同じライン上に並べたい場合は、w3-show-inline-block クラスを使用します：
<div class="w3-btn-group w3-show-inline-block">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
<div
class="w3-btn-group w3-show-inline-block">
<button class="w3-btn">Button</button>
<button
class="w3-btn w3-teal">Button</button>
<button class="w3-btn
w3-disabled">Button</button>
</div>
Try It Yourself ❯
"w3-btn-bar" クラスは、ボタンがコンテナの背景色を継承することと、 ホバー時に影の代わりに背景色が灰色になること以外は、"w3-btn-group" と同じです：
<div class="w3-btn-bar w3-border
w3-show-inline-block">
<button class="w3-btn">Button</button>
<button class="w3-btn">Button</button>
<button
class="w3-btn">Button</button>
</div>
Try It Yourself ❯
ボタンをクリックした時に、波及効果を持つように指定することができます：
<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>
Try It Yourself ❯
W3.CSS では、すべての要素をボタンにすることができます。
A picture can be a button
Any div, header, footer or other containers can be a button.
w3-btn-floating クラスは、重要な関数を表す円形のボタンを作成します：
<a class="w3-btn-floating w3-teal">+</a>
<a
class="w3-btn-floating w3-disabled">+</a>
Try It Yourself ❯
大きなフローティングボタンには、w3-btn-floating-large クラスを使用します：
<a class="w3-btn-floating-large w3-teal">+</a>
<a
class="w3-btn-floating-large w3-disabled">+</a>
Try It Yourself ❯