ホームページでボタン表示
基本のボタンをカラー表示する
下記のタグをホームページの表示したいところにコピーして下さい。黄色の部分を変えて下さい。<input type="button" value="ここに文字" style="background-color:背景色;">
アラートつきのボタン−文字色と背景色を変える
<input type="button" value="アラートあり" style="color:文字色;background-color:背景色;"
onclick="alert('アラートの文字');">
ボタンの文字色、背景色、サイズ、フォントを変える
<input style="color:文字色;background-color:背景色;font-size:15;width:150px;height:30px" type="button" value="クリックしてみて!">
アラートつき ↓↓
<input style="color:文字色;background-color:背景色;font-size:15;width:150px;height:30px" type="button" value="クリックしてみて!" onclick="alert('アラートの文字');">
マウスを乗せると色が変わるボタン
<input type="button" value="色が変わるボタン" style="background-color:最初の背景色" onmouseover="this.style.background='マウスが触れた時の背景色'" onmouseout="this.style.background='マウスが離れた時の背景色'">
アラートつき ↓↓
<input type="button" value="色が変わるボタン" style="background-color:最初の背景色" onmouseover="this.style.background='マウスが触れた時の背景色'" onmouseout="this.style.background='マウスが離れた時の背景色'" onclick="alert('アラートの文字');>

いろいろなボタン
すべてアラートつき<button>タグです。アラートが不要の場合は onclick="alert('アラートの文字')" の部分を削除して下さい。<button type="button" onclick="alert('アラートの文字')" style="border:2px solid 枠線の色; background-color:背景色;"><font color="文字の色">ここに文字</font></button>
<button type="button" onclick="alert('アラートの文字')" style="border:1px solid 枠線の色; background-color:背景色;"><font color="文字の色">ここに文字</font></button>
<button type="button" onclick="alert('アラートの文字')" style="border:2px dotted 枠線の色; background-color:背景色;"><font color="文字の色">ここに文字</font></button>
<button type="button" onclick="alert('アラートの文字')" style="border:1px dashed 枠線の色; background-color:背景色;"><font color="文字の色">ここに文字</font></button>
<button type="button" onclick="alert('アラートの文字')" style="border:3px double 枠線の色; background-color:背景色;"><font color="文字の色">ここに文字</font></button>
↓↓ 背景に画像を使ったボタン
<button type="button"onclick="alert('アラートの文字')"><img src="画像のアドレス" width="画像の幅" height="画像の高さ" border="0"></button>
↓↓ 画像を使い、背景色を指定したボタン
<button type="button"onclick="alert('アラートの文字')" style="border-color:枠線の色;background-color:背景色" ><img src="画像のアドレス" width="画像の幅" height="画像の高さ" border="0"></button>
↓↓ 背景画像に文字を入れたボタン
<button type="button"onclick="alert('アラートの文字')" style="background:url(画像のアドレス);border:1px solid 枠線の色;height:画像の高さ;width:画像の幅;background-color:背景色"><font size="文字の大きさ" color="文字の色">クリック</font></button>
★skip ページtop