スタイルシート(CSS) ボタンの色を変えてみよう

ボタンの色の変更方法です。
CSSをタグの内部に記載した方法で紹介しています。

説明 サンプル ソース
デフォルトのボタン <INPUT type=”button” value=”ボタン”>
赤系 <INPUT type=”button” value=”ボタン” style=”background-color:#ff6868;border-color:#ff6868″>
線の色を赤くし場合 <INPUT type=”button” value=”ボタン” style=”background-color:#ffffff;border-color:#ff6868;border-width:2px”>
青系 <INPUT type=”button” value=”ボタン” style=”background-color:#2864f0;border-color:#2864f0″>
線の色を青く場合 <INPUT type=”button” value=”ボタン” style=”background-color:#ffffff;border-color:#2864f0″>
基本的な構文
<INPUT type=”button” name=”ボタン名(省略化)” value=”表示する文字” style=”background-color:ボタンの色;border-color:ボタンの線色”>
ボタンの線の色は4変指定することも可能です。
<INPUT type=”button” value=”送信” style=”background-color:ボタンの色;border-color:線色(上) 線色(右) 線色(下) 線色(左);”>
線の太さを指定 border-width:サイズpx;
ボタンの色 background-color:色;
ボタンの線の色 border-color:色;