ボタン
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>
»それを自分で試してみてください button要素
W3.CSSでは、すべての要素がボタンであることができます。
絵は、ボタンすることができます
任意のdiv、ヘッダー、フッター、または他の容器は、ボタンすることができます。
フローティングボタン
W3-BTN-フローティングクラスは、重要な機能のために意図されている円形のボタンを作成します。
例
<a class="w3-btn-floating w3-teal">+</a>
<a
class="w3-btn-floating w3-disabled">+</a>
»それを自分で試してみてください 大型浮動ボタンのW3-BTN-浮動大きなクラスを使用します。
例
<a class="w3-btn-floating-large w3-teal">+</a>
<a
class="w3-btn-floating-large w3-disabled">+</a>
»それを自分で試してみてください