【HTML & CSS】 ボタンの設定（まとめ）

予算の都合上、Webデザイナさんが入ってくれないwebシステムで、
プログラマだけで何とかちょっとでもマシなデザインを作るために、知っておくといいかもしれないスタイルシートプロパティを紹介していきます。

今回はボタンのスタイルシートの設定についてです。

ボタンのスタイルシートの設定

ボタンを機能ごとに色を変えて欲しいという要望はよくあると思います。
例えば
通常ボタンは青系で、削除系のボタンは赤色で・・・といった要件です。

スタイルシートはこんな感じですかね。

.btn {
　　　　padding: 10px 30px;
　　　　font-weight: bold;
　　　　color: #ffffff;
　　　　border: none;
　　　　border-radius: 5px;
}

.btn_def{
　　　　background:  #000080;
}

.btn_del{
　　　　background:  #CD5C5C;
}

HTML

<input type="submit" value="通常" Class="btn btn_def">
<input type="submit" value="削除" Class="btn btn_del">

次によくあるのが「カーソルが当たった時がわかりにくいですよねぇ・・・」というお言葉です。
ボタンの色を変えているので、それぞれのボタンごとにホバーしたときの色を設定するのはメンドクサイです。
ここは全てのボタンで使用できる透過で処理しちゃいます。
透過を適用すると、ボタンにカーソルが当たった時にボタンの色が少し薄い色に変わります。
先ほどのスタイルシートにホバー時の設定を追加します。

.btn:hover {
　　　　opacity: 0.75;
}

opacityプロパティはCSS3の機能で透過効果を適用できます。
0.0（透明）から1.0（不透明）の数値を指定します。


このままではプログラムからボタンを無効にした時、ボタンの色が変わりません。
無効にした時のcssを追記します。

.btn:disabled {
　　　　color: #808080;
　　　　background:  #C0C0C0;
}

ここで完成と言いたいところですが、このままでは無効にしたボタンをホバーした時もボタンの色が透過されてしまいます。
ボタンが無効の時は透過させない設定を追加します。

.btn[disabled]:hover {
　　　　opacity: 1;
}

これでボタンのスタイルシートの設定は完成です。
CSS

.btn {
　　　　padding: 10px 30px;
　　　　font-weight: bold;
　　　　color: #ffffff;
　　　　border: none;
　　　　border-radius: 5px;
}

.btn:hover {
　　　　opacity: 0.75;
}

.btn:disabled {
　　　　color: #808080;
　　　　background:  #C0C0C0;
}

.btn[disabled]:hover {
　　　　opacity: 1;
}

.btn_def{
　　　　background:  #000080;
}

.btn_del{
　　　　background:  #CD5C5C;
}

HTML

<input type="submit" value="実行" Class="btn btn_def" >
<input type="submit" value="削除" Class="btn btn_del" >
<input type="submit" value="無効" Class="btn" disabled="disabled" >

これだけできれば最低限の見た目は満たしているのではと思います。