ホームページ作成ガイド

画像入りボタン

<html><head><title>画像入りボタン</title></head>
<body>

<button style="height:40px; width:180px;"><img src="salut_btn.gif" width="40" height="21" style="vertical-align:middle;"> Salut!へジャンプ</button>

</body>
</html>

フォームのボタンには画像を入れることができます。
無機質なボタンですが、画像を入れることで個性的にすることができます。

デモではボタンをクリックするとSalut!のトップページに飛ぶ仕掛けをしていますが、ここではわかりやすくするため必要最低限の記述のみしておきます。

構造的にはボタンを作る<button></button>を用います。
その中に<img>タグと表示する文言を記述します。

<button style="height:40px; width:180px;">
ボタンの大きさを指定します。

<img src="salut_btn.gif" width="40" height="21" style="vertical-align:middle;"> Salut!へジャンプ
ボタンの中に入れる画像とテキストを記述します。
style="vertical-align:middle;"は、縦方向にセンタリングする設定ですが、Macでは効かないようです。

最後に</button>で閉じます。