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:色;
  • この記事を書いた人
さすけ

さすけ

インフラ関連を中心に、仕事をしています。 最近はWeb開発の仕事も多いです。

-CSS
-

Copyright© さすけのプログラミング入門 , 2018 All Rights Reserved.