ホームページ−色つきのボタンを作る

ホームページでボタン表示

基本のボタンをカラー表示する

下記のタグをホームページの表示したいところにコピーして下さい。黄色の部分を変えて下さい。

<input type="button" value="ここに文字" style="background-color:salmon;">


<input type="button" value="アラートあり" style="color:#ffffff;background-color:#0000ff;" onclick="alert('クリックどうもですぅ。');">


<input style="color:darkred;background-color:sandybrown;font-size:15;width:150px;height:30px" type="button" value="クリックしてみて!">


アラートつき　↓↓
<input style="color:ivory;background-color:dimgray;font-size:15;width:150px;height:30px" type="button" value="クリックしてみて!" onclick="alert('クリックどうもですぅ。');">


<input type="button" value="色が変わるボタン" style="background-color:#ffff99" onmouseover="this.style.background='#99ccff'" onmouseout="this.style.background='#ffff99'">


アラートつき　↓↓
<input type="button" value="色が変わるボタン" style="background-color:#ccccff" onmouseover="this.style.background='#ccffcc'" onmouseout="this.style.background='#ccccff'" onclick="alert('クリックどうもですぅ。');">



すべてアラートつき<button>タグです。アラートが不要の場合は　onclick="alert('アラートの文字')"　の部分を削除して下さい。

いろいろなボタン <button type="button" onclick="alert('ありがとう')" style="border:2px solid #dce8c4; background-color:#f4f9ee;"><font color="#666666">いろいろなボタン</font></button>


いろいろなボタン <button type="button" onclick="alert('ありがとう')" style="border:1px solid #debec0; background-color:#F4DEEE;"><font color="#663333">いろいろなボタン</font> </button>


いろいろなボタン


<button type="button" onclick="alert('ありがとう')" style="border:2px dotted #87a2c1; background-color:#cce3ff;"><font color="#333333">いろいろなボタン</font> </button>


いろいろなボタン <button type="button" onclick="alert('ありがとう')" style="border:1px dashed #84756a; background-color:#ffffcc;"><font color="#333333">いろいろなボタン</font> </button>


いろいろなボタン <button type="button" onclick="alert('ありがとう')" style="border:3px double #666666; background-color:#ECE3D3;"><font color="#333333">いろいろなボタン</font> </button>


↓↓　背景に画像を使ったボタン

<button type="button"onclick="alert('ありがとう')"><IMG src="gatyon.gif" width="51" height="35" border="0"> </button>


↓↓　画像を使い、背景色を指定したボタン
<button type="button"onclick="alert('ありがとう')"style="border-color:#cccc00;background-color:#cccc99" ><IMG src="gatyon.gif" width="51" height="35" border="0"> </button>


↓↓　背景画像に文字を入れたボタン

クリック <button type="button"onclick="alert('ありがとう')" style="background:url(pakira.gif);border:1px solid #666666;height:100;width:100;background-color:white"><font size="2" color="purple">クリック</font> </button>




●当サイトのソースは、IE6.0＋のみ動作確認をしております。 それ以外のブラウザ、特にネットスケープでは正しく作動しない場合がございます。ご了承下さい。


★skip ページtop