W3.CSSボタン
W3.CSSボタンクラス
W3.CSSは、ボタンに次のクラスを提供します。
| クラス | 定義 |
|---|---|
| w3-btn | シャドウホバー効果のある長方形のボタン。 デフォルトの色は黒です。 |
| w3ボタン |
灰色のホバー効果のある長方形のボタン。 W3.CSSバージョン3では、デフォルトの色は明るい灰色 です。バージョン4では、デフォルトの色は親要素から継承されます。 |
| w3-bar |
ボタンをグループ化するために使用できる水平バー。 （水平ナビゲーションメニューに最適） |
| w3-ブロック | 全幅（100％）ボタンを定義するために使用できるクラス。 |
| w3-サークル | 円形のボタンを定義するために使用できます。 |
| w3-リップル | 波及効果を作成するために使用できます。 |
ボタン
w3-buttonクラスとw3-btnクラスはどちらも、 任意のHTML要素にbutton-behaviorを追加します。
使用する最も一般的な要素は、<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.w3schools.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.w3schools.com" class="w3-btn w3-black">Link Button</a>
ボタンの色
すべてのw3-カラークラスは、ボタンに色を追加するために使用されます。
例
<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サイズのクラスを使用して、さまざまなテキストサイズを定義できます。
例
<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クラスに合わせます。
ブロックのサイズは、 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.w3schools.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.w3schools.com">Link Button</a>
<button class="w3-btn" disabled>Button</button>
<input type="button" class="w3-btn" value="Button" disabled>
ボタンバー
ボタンは、 w3バークラスを使用して水平バーにグループ化できます。
例
<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>
同じ行に2つ（またはそれ以上）のボタンバーを表示するには、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>
波及効果のあるボタン
The w3-ripple class creates a ripple effect on buttons (when they are clicked on):
Example
<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>
All Elements Can Be Buttons
With W3.CSS, all elements can be a button:
A picture can be a w3-button
A picture can be a w3-btn
Any div, header, footer or other containers can be a w3-btn!
Circular Buttons
The w3-circle class can be used to create circular buttons:
Example
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>
Square buttons:
Example
<button class="w3-button w3-black">+</button>
<button
class="w3-button w3-teal">+</button>