button要素のデザインを変更する方法(HTML、CSS)
以前「フォームのsubmitボタンのデザインを変更する方法(CSS)」という記事を書いたが、大した指定を記述していなかったため、今回はデモページを設けて様々なデザインの方法を記述する。
この記事では一部CSS3を用いるので、ブラウザによっては対応していない。基本的に、Google Chromeではバージョン9以上、Firefoxではバージョン4以上、Safariではバージョン5以上が対応するが、IE(Internet Explorer)では対応していないものが多い。
CSS3を用いる部分では、CSS3を用いると表記し、IEでの対応状況も合わせて記述する。
目次
事前の説明
前回の記事では、input要素のtype=”submit”属性のボタンについて説明した。今回はbutton要素を用いるが大した変りはない。以下の2つのコードは同じ挙動を示すからだ。よって、今回は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/