| コード | 表示例 |
|---|---|
| <button></button> |
|
| <button>Click</button> |
|
| <button><img src="sample.png" />Click</button> |
|
type属性は必須ではありませんが、予期せぬ動作を防止するため指定するようにします。
ボタンの種類を宣言します。指定可能な値は、
のいずれかで、既定値はsubmitです。つまりbutton要素は、既定では<input type="submit" />と同等です。type - Forms in HTML documents
この既定がsubmitであることが、form内に配置したときに問題となることがあります。それはたとえば次のような場合で、
<form> <input type="text" /> <button>ボタン</button> <input type="submit" /> </form>
この配置でテキストボックスにフォーカスがあるとき、Enterを押せば <input type="submit" />のイベントが発生することが期待されます。しかし実際には直後にtype="submit"であるbutton要素があるため、このbutton要素のイベントが呼ばれてしまいます。
この問題に対処するには、既定値に任せずtype="button"と明示するようにします。
<form> <input type="text" /> <button type="button">ボタン</button> <input type="submit" /> </form>
こうすることでbutton要素は、"button"として機能するようになります。javascript - IE10 find first button on page and trigger click event on input submit - Stack Overflow
外観はCSSで変更できます。
| スタイル | 適用例 |
|---|---|
| color: red | |
| background-color: red | |
| border: 3px red dashed |
backgroundやborderを指定するとポイント時やクリック時の変化がなくなることがあるため、擬似クラスの:hoverや:activeでもスタイルを指定するようにします。
| スタイル | 適用例 |
|---|---|
button {
border: 1px white solid;
background-color: white;
}
button:hover {
border: 1px gray solid;
}
button:active {
background-color: gray;
}
|