img
白 クリーム 黄色 淡い緑 水色 淡い青紫 淡いグレー グレー 黒 茶 赤 濃いピンク ピンク

プッシュボタンの装飾


プッシュボタンを装飾する

  ie6 nn7 op8

スタイルを指定すると、ボタンを装飾することができます。

■ プッシュボタンの装飾

 ←通常のボタン 
<input type="button" value="ボタン表示文字">

 ←着色したボタン 
<input type="button" style="background-color:背景色;" value="ボタン表示文字">

 ←画像を使用したボタン 
<input type="button" style="background-image:url(背景画像);" value="ボタン表示文字">

 ←文字色を変更 
<input type="button" style="background-color:背景色;color:文字色;" value="ボタン表示文字">

 ←背景画像+文字色変更 
<input type="button" style="background-image:url(背景画像);color:文字色;" value="ボタン表示文字">

 ←上記文字サイズ変更 font-size:数値pt; を追加

 ←枠線+文字色 
<input type="button" style="border:数値px 枠線種 枠の色名;color:文字色;" value="ボタン表示文字">

 ←枠線+背景色+文字色 
<input type="button" style="background-color:背景色;border:数値px 枠線種 枠の色名;color:文字色;" value="ボタン表示文字">


■ 枠線の種類

上記のスタイルで設定できる線種も色々あります。



■ ボタンをクリックするとリンク先を表示

ボタンを押すとリンク先に移動します。

<form action="アドレス" target="開き方"><input type="submit" value="ボタン表示文字"></form>
例:
例: <form action="http://e-ssence.main.jp/" target="_blank"><input type="submit" value="toppageへ"></form>
上のボタンを押すと新しいウィンドウを開いてトップページが表示されます。
例:
例: <form action="http://e-ssence.main.jp/" target="_top">
<input type="submit" style="background-color:#ffffff;border:1px solid #ff6699;color:#666666;" value="toppageへ">
</form>

ボタンにスタイルを加え、開き方を _top に変えてみました。(クリックして表示されたらブラウザの戻るのボタンで戻ってください。)

○ target=""に入れる開き方
target="_parent" リンク元のフレームの親フレームに表示する。親フレームがない場合は _selfと同じ
target="_self" リンク元と同じフレームに表示する
target="_top" フレームを解除してそのウインドウ全体に表示する
target="_blank" 新しいウインドウを開いてそのウインドウに表示する
target="フレーム名" 指定したフレーム名のフレームに表示する



■ ボタンをクリックするとアラートを表示

ボタンを押すとアラートが出ます。

<input type="button" value="ボタン表示文字" onclick="alert('アラート表示文字');">

例:
例: <input type="button" value="クリック♪" onclick="alert('アラートが出ました♪');">