Input Type Buttonのタグについて

質問

◎input type=button の色を変えるには
<INPUT TYPE="BUTTON" NAME="BUTTON02" VALUE="テスト">
この中の↑どこに色を追加したらよいのでしょうか？

◎input type=button の型をhttp://okwave.jp/　のページ上の
{例}『 ? 質問する 』『！質問、回答を見る』
『(ハートマーク)お礼を見る』のような四角の型にするには
この中の↓どの部分を変更又はどの部分に
何を追加したらよいのでしょうか？
<INPUT TYPE="BUTTON" NAME="BUTTON02" VALUE="テスト">

◎どうしたら『 ? 質問する 』『！質問、回答を見る』
『(ハートマーク）お礼を見る』のように？、！、ハートマーク
などの記号や絵をinput type button に文字を書き込む時、
ボタン内の文字の前に記号や絵をつけられるのでしょうか？

◎やっとボタンを作ることができたのですが、
クリックしても画面が変わらないのはURLを設定していないからだと思うのですが
この中の↓どこへ設定したら画面を変えることができますか？
<INPUT TYPE="BUTTON" NAME="BUTTON02" VALUE="テスト">

上手に説明できませんが、ご存知の方がおられましたら教えて下さい
いろいろ調べてやってみたのですが、１つ１つの部分、部分説明があっても全部を１つのタグとしてつなげることができません。
急ぎでかなり困っております、宜しくお願い致します。
沢山の質問ですみません。

回答No.1

EndoW · ベストアンサー

◎input type=button の色を変えるには・・・・
<INPUT type="button" name="BUTTON02" value="テスト" style="color: white;background-color:black;border-color: red;">
このようにするとcolorでフォント色、background-colorで背景色、border-colorで枠の色が設定できます。細かい設定をするなら、スタイルシートというものを使うと便利ですよ！

◎input type=button の型を​http://okwave.jp/​　のページ上の・・・
◎どうしたら『 ? 質問する 』『！質問、回答を見る』・・・
ページを見てみると、このボタンはinput type=buttonで作っているわけではなく、スタイルシート+gifファイル（画像）でボタンのように見せているようです。なので、inputタグだけでなく、別途画像を用意しないと、このようなボタンは作れないと思います・・・

◎やっとボタンを作ることができたのですが、・・・・
<INPUT type="button" name="BUTTON02" value="テスト" onClick="location.href='～～～'">
のように書くとリンク先が指定され、画面遷移するはずです。リンク先の指定は、onClick="location.href='～～～'"の～～～の部分に行ってください。
（例）ボタンを押したとき、教えてgooトップページに飛ばしたい場合は、
<INPUT type="button" name="BUTTON02" value="テスト" onClick="location.href='http://oshiete.goo.ne.jp/'">
で飛ぶと思います。

お礼

ご回答ありがとうございます、早々にお返事を下さり有難うございます
すぐに試してみました。初めて飛ばすことができました＼(^◇^)／
<INPUT type="button" name="BUTTON02" value="テスト" onClick="location.href='～～～'">
これ↑で出来ました、ここ数日間かなり苦戦しておりましたので、とても嬉しいです、有難うございます。
すぐに回答を拝見させて頂いたのですが、教えて頂きましたので結果をご報告させて頂きたいと思いお礼が遅くなりました、すみません、今まで色々と試しておりました、スタイルシートも初めて知りました、色々と調べてみましたがまださっぱり分かりませんが、スタイルシートを知っただけでも勉強になりました。
本当に有難うございますm(_ _)m

補足

◎なぜか色が変わりませんでした。
<INPUT type="button" name="BUTTON02" value="テスト" style="color: white;background-color:black;border-color: red;">
これ↑とこれ↓サンプルカラーで何度か試してみましたが、やはり色が変わりませんでした。<INPUT type="button" name="BUTTON02" value="テスト" style="color: #99CC99 ;background-color:#990033;border-color: #9933FF;">　どこがいけないのでしょうか？

◎やはりgif画像が関係していたのですね。。。スタイルシートについてのサイトを調べていますが、説明分のほとんどがその部分だけの作り方で、全てのタグを１つにつなげることが、かなり難しいです。
自分で描いたイラスト？又は何かをGif画像にして『スタイルシート+gifファイル（画像）』にした場合 [例]『 ? 質問する 』『！質問、回答を見る』このような可愛いものができるんですよね？
<INPUT type="button" name="BUTTON02" value="テスト" onClick="location.href='?http://oshiete.goo.ne.jp/'">?
この中にスタイルシートとgif画像をつなげるのでしょうか？
もしご迷惑でなければ教えて下さい。
飛ばすことができただけでも、本当に助かりました、有難うございます。よろしくお願い致します。