ホームページ−ボタンでリンクする

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

ボタンにリンクをつける

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

<input type="button" onclick="location.href='test.htm'"value="ボタンでリンク１">

新窓で開きます　↓↓

<input type="button" onclick="window.open('test.htm')" value="ボタンでリンク２">


ボタンでリンク３

<button type="button" onclick="location.href='test.htm'">ボタンでリンク３</button>


↓↓　カラー付き　新窓で開きます
ボタンでリンク４ <button type="button"onclick="window.open('test.htm')"style="background-color:salmon;" >ボタンでリンク４</button>


↓↓　立体的、カラー付き　新窓で開きます
ボタンでリンク５ <button type="button"onclick="window.open('test.htm')" style="border-width:4; background-color:#ccccff;" >ボタンでリンク５</button>


<button></button>タグ　すべて新窓で開きます。
<button>タグはボタン上のフォントやサイズの変更、画像の表示、またそれらを組み合わせたりすることができます。

ボタンでリンク６ <button type="button"onclick="window.open('test.htm')" style="background-color:#ffff99;" onmouseover="this.style.background='#99ccff'" onmouseout="this.style.background='#ffff99'">ボタンでリンク６</button>


↓↓　サイズを変更
ボタンでリンク７ <button type="button" onclick="window.open('test.htm')"style="background-color:peachpuff;width:200px;height:28px;" onmouseover="this.style.background='lightskyblue'" onmouseout="this.style.background='peachpuff'">ボタンでリンク７</button>


↓↓　ボタン・フォントのサイズを変更　立体的ボタンに変更
ボタンでリンク８　クリックしてね <button type="button"onclick="window.open('test.htm')"style="border-width:4;background-color:#ccccff;width:250px;height:40px;" onmouseover="this.style.background='lightskyblue'" onmouseout="this.style.background='#ccccff'">ボタンでリンク８　<font size="4">クリックしてね</font></button>


すべて新窓で開きます

<button type="button"onclick="window.open('test.htm')"><img src="gatyon.gif" width="51" height="35" border="0"></button>


↓↓　背景色を指定する
<button type="button"onclick="window.open('test.htm')"style="border-color:#666666;background-color:#cccc99" ><img src="gatyon.gif" width="100" height="100" border="0"></button>


↓↓　画像を使ったボタンに文字を入れる

クリック <button type="button"onclick="window.open('test.htm')" style="background:url(pakira.gif);border:1px solid #99cc66;height:88;width:52;background-color:white"><font size="2" color="purple">クリック</font></button>




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


★skip ページtop