8−1.ボタン(色・形…編)

(補足)
いろんな、ボタンを使うタグと合わせて使ってね。(試しに8−2.ボタン(押すと…編)と合わせて使ってみてね。) onclick= の前に style= 以降を付けてね。スペースで区切るのも忘れずにね。
(もちろん、 > は、いらないよ)詳しくは、8−2.を見てね。
要は、onClick="〜〜" の部分がボタンを押した時の動作を表すタグです。
半角の ; で1項目なので、必要に応じて項目を削ったり、加えたりする事も出来ます。

ボタンの文字を改行する場合は、半角の &#13; が <br> の役目を果たして、改行タグになります。
(例)おっは〜&#13;おやすみぃ〜(ボタンの文字の場合) = おっは〜<br>おやすみぃ〜(通常の場合)
(注1)文字の太さは、100〜900の間で、100刻みに(100・200・300・・・900)指定してくださいね。また、100が一番細く、900が一番太くなります。
(注2)これは、他のタグとボタンの組み合わせですので、詳しくは、1−2.文字や、3.文字の装飾を見てみてね。


↓枠の形をここから選んでね。
実線    :solid
二重線   :double
丸い点線  :dotted
四角い点線 :dashed
内沈み線  :inset
内浮き出し線:outset
山線    :ridge
谷線    :groove


赤い文字の部分を変更してコピー貼り付けで使ってね!
普通のボタン<input type="button" value="ボタンの文字">
色付きのボタン<input type="button" value="ボタンの文字" style="background-color:#背景色;color:#文字色;border-color:#枠色">
ボタンの文字の太さを変える(注1)<input type="button" value="ボタンの文字" style="background-color:#背景色;color:#文字色;border-color:#枠の色;font-weight:文字の太さ">
ボタンの文字の書体を変える<input type="button" value="ボタンの文字" style="background-color:#背景色;color:#文字色;border-color:#枠色;font-family:文字の書体">
ボタンの大きさを変える<input type="button" value="ボタンの文字" style="background-color:#背景色;color:#文字色;border-color:#枠色;font-size:ボタンの大きさpt;border-width:枠の太さpx">
ボタンの枠を変える<input type="button" value="ボタンの文字" style="background-color:#背景色;color:#文字色;border-color:#枠色;border-width:枠の太さpx;border-style:枠の形">
ラジオボタン<input type="radio" name="ボタンの識別名">
チェックボタン<input type="checkbox" name="ボタンの識別名">
ONマウスで背景色が変わるボタン<input type="button" value="ボタンの文字" style="background-color:#元の背景色;color:#文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.style.backgroundColor='#ONマウスの背景色'">
離すとさらに背景色が変化<input type="button" value="ボタンの文字" style="background-color:#元の背景色;color:#文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.style.backgroundColor='#ONマウスの背景色'" onmouseout="this.style.backgroundColor='#マウスを離した時の背景色'">
ONマウスで文字色が変わるボタン<input type="button" value="ボタンの文字" style="color:#元の文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.style.color='#ONマウスの文字色'">
離すとさらに文字色が変化<input type="button" value="ボタンの文字" style="color:#元の文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.style.color='#ONマウスの文字色'" onmouseout="this.style.color='#マウスを離した時の文字色'">
ONマウスでボタンの文字が変わる<input type="button" value="最初のボタンの文字" style="color:#文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.value='ONマウスのボタンの文字'">
離すとさらに文字が変化<input type="button" value="最初のボタンの文字" style="color:#文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.value='ONマウスのボタンの文字'" onmouseout="this.value='マウスを離した時のボタンの文字'">
ONマウスでボタンの大きさが変わる<input type="button" value="ボタンの文字" style="color:#文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.style.fontSize='ONマウス時の大きさpx'">
離すとさらに大きさが変化<input type="button" value="ボタンの文字" style="color:#文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.style.fontSize='ONマウス時の大きさpx'" onmouseout="this.style.fontSize='マウスを離した時の大きさpx'">
ONマウスで背景色・文字色・文字・大きさが変わるボタン<input type="button" value="元のボタンの文字" style="background-color:#元の背景色;color:#元の文字色;border-color:#枠色;font-size:元のボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.style.backgroundColor='#ONマウスの背景色';this.style.color='#ONマウスの文字色';this.value='ONマウスのボタンの文字';this.style.fontSize='ONマウス時の大きさpx'">
離すとさらに背景色・文字色・文字・大きさが変化<input type="button" value="元のボタンの文字" style="background-color:#元の背景色;color:#元の文字色;border-color:#枠色;font-size:元のボタンの大きさpx;border-width:枠の大きさpx" onmouseover="this.style.backgroundColor='#ONマウスの背景色';this.style.color='#ONマウスの文字色';this.value='ONマウスのボタンの文字';this.style.fontSize='ONマウス時の大きさpx'" onmouseout="this.style.backgroundColor='#マウスを離した時の背景色';this.style.color='#マウスを離した時の文字色';this.value='マウスを離した時のボタンの文字';this.style.fontSize='マウスを離した時の大きさpx'">
ONマウスで消えるボタン<input type="button" value="ボタンの文字" onmouseover="this.style.visibility='hidden'">
マウスを離すと消えるボタン<input type="button" value="ボタンの文字" onmouseout="this.style.visibility='hidden'">
画像のボタン<button type="button" style="background-color:#背景色;color:#文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx"><img src="画像のURL" alt="画像が出ない時の代替の文字"><br>ボタンの文字</button>
文字が流れるボタン(注2)<button type="button" style="background-color:#背景色;color:#文字色;border-color:#枠色;font-size:ボタンの大きさpx;border-width:枠の大きさpx"><marquee>ボタンの文字</marquee></button>
文字が流れるボタン(上下左右編)(注2)<button type="button" style="background-color:#背景色;color:#文字色;border-color:#枠色;font-size:文字の大きさpx;border-width:枠の大きさpx"><marquee height="ボタンの縦幅" width="ボタンの横幅" direction="up OR down" behavior="alternate" scrollamount="上下の動く速さ"><marquee direction="left OR right" behavior="alternate" scrollamount="左右の動く速さ">文字</marquee></marquee></button>
文字が装飾されたボタン(発光)(注2)<button type="button" style="background-color:#背景色;border-color:#枠色;border-width:枠の大きさpx;height:ボタンの縦幅;width:ボタンの横幅"><font style="filter:glow(color=#発光色);width:100%;font-size:文字の大きさ;color:#文字色" face="文字の書体"><b>文字</b></font></button>
文字が装飾されたボタン(立体影)(注2)<button type="button" style="background-color:#背景色;border-color:#枠色;border-width:枠の大きさpx;height:ボタンの縦幅;width:ボタンの横幅"><font style="filter:shadow(color=#影の色,direction=135);width:100%;font-size:文字の大きさ;color:#文字色" face="文字の書体"><b>文字</b></font></button>



HTMLタグに戻る