及川WEB室｜ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > CSS > 立体的なボタン（CSS3）

立体的なボタン（CSS3）

(modified) 2012/05/29
画像を使わずに、CSSで立体的なボタンが作れます。
そのCSS（CSS3）をご紹介。
※IE6,IE7,IE8 向け改良版も追記しました（2012/05/29）。

表示例

及川治建築設計室 IE6 IE9 違い Internet Explorer ではIE9しかきちんと見れていない。
IE6,IE7,IE8 ではグラデーションと影は見えていない。
(IE8 以下の対応については「IE6,IE7,IE8 向け改良版」参照。)

HTMLのソースコードとCSS サンプル

及川治建築設計室

a.btn {
	/* 文字色、ボタンの横幅など */
color:#5F2500;padding:5px 0;display:block;width:200px;text-align:center;
	/* 背景のグラデーション */
background: linear-gradient(to bottom, #FFF, #CCC);
background: -moz-linear-gradient(to bottom, #FFF, #CCC);　/* Firefox */
background: -webkit-gradient(linear, left top, left bottom,from(#000), to(#CCC));	/* Safari,Google Chrome */
background: -webkit-linear-gradient(top,#FFF 0%,#CCC 100%);	/* Android */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ffffff,endcolorstr=#CCCCCC));	/*IE6 IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ffffff,endcolorstr=#CCCCCC))";	/* IE8 - */
zoom: 1;	/* IE */
	/* 文字の影 */
text-shadow:1px 3px 2px #999;
	/* 枠の影 */
box-shadow:2px 2px 10px #666;
-moz-box-shadow:2px 2px 7px #666;　/* Firefox */
-webkit-box-shadow:2px 2px 7px #666;	/* Safari,Google Chrome */
}

	/* マウスオーバー時 */
a.btn:hover {
position:relative;left:1px;top:1px;
box-shadow:1px 1px 5px #666;
-moz-box-shadow:1px 1px 5px #666;
-webkit-box-shadow:1px 1px 5px #666;
}
※IE10対応のため、「background: linear-gradient(to bottom, #FFF, #CCC);」を追記。
また、「background: -moz-linear-gradient(top, #FFF, #CCC);　/* Firefox */」を、「background: -moz-linear-gradient(to bottom, #FFF, #CCC);　/* Firefox */」に変更。（top を to bottom に変更）（2013/06/21）

※Android 4.2.2 でグラデーションを有効にさせるために下記を追記。（2014/06/15）
background: -webkit-linear-gradient(top,#FFF 0%,#CCC 100%); /* Android */

CSSファイルダウンロード
ファイル名「css_btn.css」

IE6,IE7,IE8 向け改良版

Internet Explorer はCSS3 に対応していないため、前述のボタンでは、IE6 ではグラデーションも影（シャドウ）もきちんと表示されない。
対応策として、CSS3 非対応のIE6,IE7,IE8 でも、グラデーション、影、角丸などを可能にしてくれる「CSS3 PIE」というスクリプトがあるのでそれを使ってみた。
（なぜか、IE9では機能しなかった。）
　「CSS3 PIE」未使用 （この例は角丸無し）IE6 IE9 違い ↓　　　↓
　「CSS3 PIE」を使った改良版（角丸も追加）　IE6とIE9での見えの違い
こちら↓を参考にさせて頂きました。ありがとうございます。
[CSS3]今から出来るIE対策 「影とグラデーション編」 | CreaMo!-クリーモ!-クリエイティブをMotto!集めるブログ

CSS3 PIE を使う

「CSS3 PIE」は、CSS3非対応のIE6/IE7/IE8 でも、CSS3の 角丸(border-radius)、影（box-shadow）、画像ボーダー(border-image)、背景に複数画像指定(multiple background images)、グラデーション(backgroundプロパティのlinear-gradient()関数)、などを表示可能にしてくれるオープンソースのプログラム。
こちらの公式サイト↓からプログラムをダウンロードできます。CSS3 PIE: CSS3 decorations for IE ダウンロードしたファイルを解凍し、その中の「PIE.htc」を自分のサイト内の任意の場所に設置する。
そして、グラデーションや角丸を設定したクラスに下記のスタイルを追加する。 
behavior:url(/path/PIE.htc);	/* PIE.htc へのパスは表示HTMLからの相対 */
※上記の /path/ の部分は、ボタンを表示するHTMLファイルからの PIE.htc へのパス。

サンプル

残念なことに、IE9では背景のグラデーションの塗りが角丸にならない。
IE6/IE7/IE8/IE10 ではきちんと角丸になっている。 及川治建築設計室 IE6とIE9での見えの違い 
<a class="btn2" href="http://www.oikawa-sekkei.com/" target="_blank">
及川治建築設計室</a>
a.btn2 {
padding:5px 0;width:200px;text-align:center;display:block;

	/* グラデーション */
background:linear-gradient(top,#FFF,#CCC);
background: -moz-linear-gradient(top, #FFF, #CCC);　/* Firefox */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
-pie-background: linear-gradient(#FFF, #CCC);	/* PIE用の記述 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ffffff,endcolorstr=#CCCCCC));	/*IE6 IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff,endColorstr=#CCCCCC))";	/* IE8 - */

	/* border */
border:1px solid #CCC;
border-radius:10px; /* CSS3草案 */
-webkit-border-radius: 10px; /* Safari, Chrome用 */
-moz-border-radius:10px; /* Firefox用 */

text-shadow:#999 1px 3px 2px;	/* 文字の影 */
box-shadow:#666 3px 3px 7px;	/* 枠の影 */
-moz-box-shadow:#666 3px 3px 7px;	/* Firefox */
-webkit-box-shadow:#666 3px 3px 7px;	/* Safari,Google Chrome */

behavior:url(/path/PIE10b5/PIE.htc);/* 表示HTMLからの相対 */
position: relative;	/* 角丸がグラデーションに重ならないように for lt IE8 */
zoom: 1;	/* for IE */
}
※IE10対応のため、「background: linear-gradient(to bottom, #FFF, #CCC);」を追記。
また、「background: -moz-linear-gradient(top, #FFF, #CCC);　/* Firefox */」を、「background: -moz-linear-gradient(to bottom, #FFF, #CCC);　/* Firefox */」に変更。（top を to bottom に変更）（2013/06/21）
  • PIE で CSS3 の multiple background images （背景に複数画像指定）や、linear-gradient（グラデーション）を実行するには、「-pie-background:」という記述にする。 CSS3 Backgrounds (-pie-background)
  • behavior:url(/path/PIE.htc);　で、PIEを呼び出す。URLは、表示するHTMLからpie.htcへの相対パス、もしくはhttp から始まる絶対URL。
  • position:relative は、背景やボーダーがきちんと表示されない場合、記述。
  • zoom:1; は、IEでのCSSのバグを回避するための記述。
  • text-shadow は IE6,IE7,IE8,IE9では非対応。

結論

IE6,IE7,IE8,IE9 全部での表示を考えると、IE9で角丸とグラデーションの同時使用ができないので、
「グラデーション有り + 角丸無し」か「グラデーション無し + 角丸」にするのが良いかも。（今のところは。）

グラデーション有り + 角丸無し及川治建築設計室 
	/* グラデーション */
background:linear-gradient(to bottom,#FFF,#CCC);
background: -moz-linear-gradient(to bottom, #FFF, #CCC);　/* Firefox */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
-pie-background: linear-gradient(#FFF, #CCC);	/* PIE用の記述 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#ffffff,endcolorstr=#CCCCCC));	/*IE6 IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffffff,endColorstr=#CCCCCC))";	/* IE8 - */
/* border */
border:1px solid #CCC; 

color:#666; padding:5px 0; width:200px; text-align:center; display:block;
text-shadow:#999 1px 3px 2px;/* 文字の影 */ 
box-shadow:#666 3px 3px 7px;/* 枠の影 */ 
-moz-box-shadow:#999 3px 3px 7px;	/* Firefox */ 
-webkit-box-shadow:#666 3px 3px 7px;	/* Safari,Google Chrome */ 

behavior:url(/path/PIE10b5/PIE.htc);/* 表示HTMLからの相対 */ 
position: relative;	/* for lt IE8 */ 
zoom: 1;	/* for IE */
※IE10対応のため、「background: linear-gradient(to bottom, #FFF, #CCC);」を追記。
また、「background: -moz-linear-gradient(top, #FFF, #CCC);　/* Firefox */」を、「background: -moz-linear-gradient(to bottom, #FFF, #CCC);　/* Firefox */」に変更。（top を to bottom に変更）（2013/06/21）

グラデーション無し + 角丸及川治建築設計室 
/* 背景 */
background:#eee;
/* border */
border:1px solid #CCC; border-radius:10px; /* CSS3草案 */ 
-webkit-border-radius: 10px; /* Safari, Chrome用 */ 
-moz-border-radius:10px; /* Firefox用 */ 

color:#666; padding:5px 0; width:200px; text-align:center; display:block;
text-shadow:#999 1px 3px 2px;/* 文字の影 */ 
box-shadow:#666 3px 3px 7px;/* 枠の影 */ 
-moz-box-shadow:#999 3px 3px 7px;	/* Firefox */ 
-webkit-box-shadow:#666 3px 3px 7px;	/* Safari,Google Chrome */ 

behavior:url(/path/PIE10b5/PIE.htc);/* 表示HTMLからの相対 */ 
position: relative;	/* for lt IE8 */ 
zoom: 1;	/* for IE */

デザイン重視で、どのバージョンのIEでも、どのブラウザでも、絶対に見え方を統一したいという場合は、CSS3は使わずに、画像で処理してください・・・。

MENU Ξ