|
|
|
|
HOME > HTML & CSSパーツ > テーブルボタンサンプル |
|
テーブルボタンサンプル
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| ホームページには必ずボタンを使うと思うのですが、画像ではなく |
| タグだけで、画像のような効果があるので作成の手間も少なくて済みますし、 |
| 初心者の方でも、下記のサンプルソースをご自身のホームページに貼りつけるだけで |
| すぐにフェードのように滑らかに、ロールオーバーするボタンを挿入できます。 |
|
|
|
|
|
|
|
設置方法
|
|
| width=ボタンの横幅 height=ボタンの高さ |
| bgcolor=ボタンの背景色 |
| onmouseover=マウスが上に来た時の背景色 onmouseout=マウスがボタンから離れたときの背景色 |
| colorで文字の色の指定 font-sizeでボタンの文字の大きさの指定 |
| href="ここにリンク先URL(ファイル名)を入れて下さい" |
|
|
|
|
|
| サンプル コピーしてご利用ください！ |
|
|
|
<table border="0" cellspacing="0" cellpadding="2"
width="120" height="22" style="border:thin ridge
#110000;">
<tr><td bgcolor="#660000" align=center onmouseover="this.style.background='#330000'" onmouseout="this.style.background='#660000'">
<a style="color:#ffffff;text-decoration:none;font-size:14px;width:100%;"
href="#">詳細を見る</a>
</td></tr></table> |
|
|
|
|
|
| その他のカラー |
|
|
|
<table border="0" cellspacing="0" cellpadding="2"
width="120" height="22" style="border:thin ridge
#999999;">
<tr><td bgcolor="#000000" align=center onmouseover="this.style.background='#333333'" onmouseout="this.style.background='#000000'">
<a style="color:#ffffff;text-decoration:none;font-size:14px;width:100%;"
href="#">詳細を見る</a>
</td></tr></table> |
|
|
|
|
|
|
|
<table border="0" cellspacing="0" cellpadding="2"
width="120" height="22" style="border:thin ridge
#990000;">
<tr><td bgcolor="#ce0000" align=center onmouseover="this.style.background='#ec0000'" onmouseout="this.style.background='#ce0000'">
<a style="color:#ffffff;text-decoration:none;font-size:14px;width:100%;"
href="#">詳細を見る</a>
</td></tr></table> |
|
|
|
|
|
<table border="0" cellspacing="0" cellpadding="2"
width="120" height="22" style="border:thin ridge
#009966;">
<tr><td bgcolor="#003e00" align=center onmouseover="this.style.background='#006600'" onmouseout="this.style.background='#003e00'">
<a style="color:#ffffff;text-decoration:none;font-size:14px;width:100%;"
href="#">詳細を見る</a>
</td></tr></table> |
|
|
|
|
|
|
|
|
|
|
|
|
<table border="0" cellspacing="0" cellpadding="2"
width="120" height="22" style="border:thin ridge
#999999;">
<tr><td bgcolor="#000066" align=center onmouseover="this.style.background='#000033'" onmouseout="this.style.background='#000066'">
<a style="color:#ffffff;text-decoration:none;font-size:14px;width:100%;" href="#">詳細を見る</a>
</td></tr></table> |
|
|
|
|
|
|
|
<table border="0" cellspacing="0" cellpadding="2" width="120" height="20" style="border:thin ridge #0033ff;">
<tr><td bgcolor="#99ffff" align=center onmouseover="this.style.background='#00ffcc'" onmouseout="this.style.background='#99ffff'">
<a style="color:#000099;text-decoration:none;font-size:14px;width:100%;" href="#">詳細を見る</a>
</td></tr></table> |
|
|
|
|
|
|
<table border="0" cellspacing="0" cellpadding="2" width="120" height="20" style="border:thin ridge #ff0066;">
<tr><td bgcolor="#ff99cc" align=center onmouseover="this.style.background='#ff66cc'" onmouseout="this.style.background='#ff99cc'">
<a style="color:#ffffff;text-decoration:none;font-size:14px;width:100%;" href="#">詳細を見る</a>
</td></tr></table> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HOME
