button要素のデザインを変更する方法（HTML、CSS）
以前「フォームのsubmitボタンのデザインを変更する方法（CSS）」という記事を書いたが、大した指定を記述していなかったため、今回はデモページを設けて様々なデザインの方法を記述する。
この記事では一部CSS3を用いるので、ブラウザによっては対応していない。基本的に、Google Chromeではバージョン9以上、Firefoxではバージョン4以上、Safariではバージョン5以上が対応するが、IE（Internet Explorer）では対応していないものが多い。
CSS3を用いる部分では、CSS3を用いると表記し、IEでの対応状況も合わせて記述する。
目次
事前の説明
前回の記事では、input要素のtype=”submit”属性のボタンについて説明した。今回はbutton要素を用いるが大した変りはない。以下の２つのコードは同じ挙動を示すからだ。よって、今回はbutton要素をもとに考える事にする。
また、以下の記述ではformタグは省略して説明する。デモページでボタンによって異なるCSSを適用するためにclassを付けるが、自分のサイト内でデザインを統一する際には必要ない。
input要素を用いたボタンの記述
<form action=""> <input type="submit" value="Button"> </form>
button要素を用いたボタンの記述
<form action=""> <button type="submit">Button</button> </form>
デフォルトのボタン
デフォルトのボタンは以下のコードで記述した。
デフォルトのボタン – HTML部分
<button class="button1" type="submit">Button</button>
デフォルトのボタン – CSS部分
button.button1 {
/* 指定なし */
}
デフォルトのボタンの文字サイズと余白の変更
以下のコードの通り。これ以降HTML部分の変更はclass名の変更のみ。
デフォルトのボタン（文字サイズ、余白変更） – HTML部分
<button class="button2" type="submit">Button</button>
デフォルトのボタン（文字サイズ、余白変更） – CSS部分
button.button2 {
/* 文字サイズを1.4emに指定 */
font-size: 1.4em;
/* 文字の太さをboldに指定 */
font-weight: bold;
/* 縦方向に10px、
* 横方向に30pxの余白を指定 */
padding: 10px 30px;
}
ボタンの色変更
以下のコードの通り。
ボタンの色変更 – HTML部分
<button class="button3" type="submit">Button</button>
ボタンの色変更 – CSS部分
button.button3 {
/* 文字サイズを1.4emに指定 */
font-size: 1.4em;
/* 文字の太さをboldに指定 */
font-weight: bold;
/* 縦方向に10px、
* 横方向に30pxの余白を指定 */
padding: 10px 30px;
/* 背景色を濃い青色に指定 */
background-color: #248;
/* 文字色を白色に指定 */
color: #fff;
/* ボーダーをなくす */
border-style: none;
}
ボタンのオンマウス時の色変更
以下のコードの通り。
ボタンのオンマウス時の色変更 – HTML部分
<button class="button4" type="submit">Button</button>
ボタンのオンマウス時の色変更 – CSS部分
button.button4 {
/* 文字サイズを1.4emに指定 */
font-size: 1.4em;
/* 文字の太さをboldに指定 */
font-weight: bold;
/* 縦方向に10px、
* 横方向に30pxの余白を指定 */
padding: 10px 30px;
/* 背景色を濃い青色に指定 */
background-color: #248;
/* 文字色を白色に指定 */
color: #fff;
/* ボーダーをなくす */
border-style: none;
}
button.button4:hover {
/* 背景色を明るい青色に指定 */
background-color: #24d;
/* 文字色を白色に指定 */
color: #fff;
}
ボタンの影の指定 ※CSS3使用
以下のコードの通り。box-shadowプロパティはIE9以上で対応している。
ボタンの影の指定 – HTML部分
<button class="button5" type="submit">Button</button>
ボタンの影の指定 – CSS部分
button.button5 {
/* 文字サイズを1.4emに指定 */
font-size: 1.4em;
/* 文字の太さをboldに指定 */
font-weight: bold;
/* 縦方向に10px、
* 横方向に30pxの余白を指定 */
padding: 10px 30px;
/* 背景色を濃い青色に指定 */
background-color: #248;
/* 文字色を白色に指定 */
color: #fff;
/* ボーダーをなくす */
border-style: none;
/* ボタンの影の指定
* 影の横幅を2px
* 縦長を2px
* ぼかしを3px
* 広がりを1px
* 色を#666（グレー）に指定 */
box-shadow: 2px 2px 3px 1px #666;
-moz-box-shadow: 2px 2px 3px 1px #666;
-webkit-box-shadow: 2px 2px 3px 1px #666;
}
button.button5:hover {
/* 背景色を明るい青色に指定 */
background-color: #24d;
/* 文字色を白色に指定 */
color: #fff;
}
テキストの影の指定 ※CSS3使用
以下のコードの通り。text-shadowプロパティはIE9でも対応しておらず、その後のバージョンでの対応状況は未検証。
テキストの影の指定 – HTML部分
<button class="button6" type="submit">Button</button>
テキストの影の指定 – CSS部分
button.button6 {
/* 文字サイズを1.4emに指定 */
font-size: 1.4em;
/* 文字の太さをboldに指定 */
font-weight: bold;
/* 縦方向に10px、
* 横方向に30pxの余白を指定 */
padding: 10px 30px;
/* 背景色を濃い青色に指定 */
background-color: #248;
/* 文字色を白色に指定 */
color: #fff;
/* ボーダーをなくす */
border-style: none;
/* ボタンの影の指定
* 影の横幅を2px
* 縦長を2px
* ぼかしを3px
* 広がりを1px
* 色を#666（グレー）に指定 */
box-shadow: 2px 2px 3px 1px #666;
-moz-box-shadow: 2px 2px 3px 1px #666;
-webkit-box-shadow: 2px 2px 3px 1px #666;
/* テキストの影の指定
* 影の横幅を1px
* 縦長を1px
* ぼかしを2px
* 色を#000（黒）に指定 */
text-shadow: 1px 1px 2px #000;
}
button.button6:hover {
/* 背景色を明るい青色に指定 */
background-color: #24d;
/* 文字色を白色に指定 */
color: #fff;
}
ボタンのグラデーション指定 ※CSS3使用
以下のコードの通り。gradientプロパティはIE9でも対応しておらず、その後のバージョンでの対応状況は未検証。
今回、オンマウス時の設定として（hover部分）、opacityプロパティを用いた。これは透明度を指定するものである。opacityを1の場合に不透明度100%で、0の場合に不透明度0%（完全に透明になる）となる。今回は0.8としたので、不透明度80%（＝透明度20%）の指定をした。opacityプロパティは、border-radiusプロパティはIE9以上で対応している。
ボタンのグラデーション指定 – HTML部分
<button class="button7" type="submit">Button</button>
ボタンのグラデーション指定 – CSS部分
button.button7 {
/* 文字サイズを1.4emに指定 */
font-size: 1.4em;
/* 文字の太さをboldに指定 */
font-weight: bold;
/* 縦方向に10px、
* 横方向に30pxの余白を指定 */
padding: 10px 30px;
/* 文字色を白色に指定 */
color: #fff;
/* ボーダーをなくす */
border-style: none;
/* ボタンの影の指定
* 影の横幅を2px
* 縦長を2px
* ぼかしを3px
* 広がりを1px
* 色を#666（グレー）に指定 */
box-shadow: 2px 2px 3px 1px #666;
-moz-box-shadow: 2px 2px 3px 1px #666;
-webkit-box-shadow: 2px 2px 3px 1px #666;
/* テキストの影の指定
* 影の横幅を1px
* 縦長を1px
* ぼかしを2px
* 色を#000（黒）に指定 */
text-shadow: 1px 1px 2px #000;
/* グラデーションの指定 */
background: -moz-linear-gradient(bottom, #36d, #248 50%, #36d);
background: -webkit-gradient(linear, left bottom, left top, from(#36d), color-stop(0.5, #248), to(#36d));
}
button.button7:hover {
/* 透明度を20%に指定 */
opacity: 0.8;
}
ボタンの角を角丸にする指定 ※CSS3使用
以下のコードの通り。border-radiusプロパティはIE9以上で対応している。
ボタンの角を角丸にする指定 – HTML部分
<button class="button8" type="submit">Button</button>
ボタンの角を角丸にする指定 – CSS部分
button.button8 {
/* 文字サイズを1.4emに指定 */
font-size: 1.4em;
/* 文字の太さをboldに指定 */
font-weight: bold;
/* 縦方向に10px、
* 横方向に30pxの余白を指定 */
padding: 10px 30px;
/* 文字色を白色に指定 */
color: #fff;
/* ボーダーをなくす */
border-style: none;
/* ボタンの影の指定
* 影の横幅を2px
* 縦長を2px
* ぼかしを3px
* 広がりを1px
* 色を#666（グレー）に指定 */
box-shadow: 2px 2px 3px 1px #666;
-moz-box-shadow: 2px 2px 3px 1px #666;
-webkit-box-shadow: 2px 2px 3px 1px #666;
/* テキストの影の指定
* 影の横幅を1px
* 縦長を1px
* ぼかしを2px
* 色を#000（黒）に指定 */
text-shadow: 1px 1px 2px #000;
/* グラデーションの指定 */
background: -moz-linear-gradient(bottom, #36d, #248 50%, #36d);
background: -webkit-gradient(linear, left bottom, left top, from(#36d), color-stop(0.5, #248), to(#36d));
/* 角丸の指定 */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
button.button8:hover {
/* 透明度を20%に指定 */
opacity: 0.8;
}
関連記事
フォームのsubmitボタンのデザインを変更する方法（CSS）
HTMLからCSSファイルを呼び出す方法
HTML5、CSS3のブラウザ毎の対応状況が確認できるサイト
コメント
[…] http://monopocket.jp/blog/css/1587/ […]
2015年6月4日 7:55 PM｜ こんなの作りたい！CSS3で実装するキレイなボタンチュートリアルまとめ | NESTonline Blog
ボタンのCSSを調べていてたどりつきました。
わかりやすくて助かりました。
ありがとうございます
2015年5月9日 2:21 PM｜ t.ebinuma
コメントフィード
トラックバックURL： http://monopocket.jp/blog/css/1587/trackback/