IEでもそこそこできる！CSSで作る画像のようなボタン

すべて再現できるわけではないですが、CSS3 PIEを使えばそこそこ再現できます。

CSS3 PIE

これを使えば、IE6～9でも、border-radiusやbox-shadowなどのCSS3プロパティが使えます。

HTMLはそのままです。

<a href="#" id="button">button</a>

CSSはこんな感じです。

#button {
  width:320px;
  color:#e4eef8;
  background:#337fcc;
  font-size:28px;
  font-weight:bold;
  text-shadow:0 -1px 1px #143352;
  text-align:center;
  display:block;
  text-decoration:none;
  border:1px solid #225588;
  padding:12px 0 8px 0;
  border-radius:12px;
  background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
  background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));
  background:-ms-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
  background:-o-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
  background:linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));
  -pie-background: linear-gradient(#77aadd, #225588);
  box-shadow:0px 1px 0px #1b446d,
             0px 2px 0px #1b446d,
			 0px 3px 0px #1b446d,
			 0px 4px 0px #1b446d,
			 0px 5px 0px #1b446d,
			 0px 6px 0px #1b446d,
			 0px 7px 0px #1b446d,
			 2px 7px 3px rgba(0,0,0,0.3),
			 0px 1px 0px rgba(255,255,255,0.5) inset,
			 0px -1px 0px rgba(255,255,255,0.2) inset;
  behavior: url(PIE.htc);
}

19行目でIE6～8用のグラデーションになります。border-radiusやbox-shadowはそのままで大丈夫ですが、グラデーションは「-pie-background」という専用のプロパティを使います。

あと、グラデーションにRGBAカラーが使えなかったのでカラーコードを使っています。

30行目でPIE.htcを読み込んでいます。PIE.htcはCSS3 PIEでダウンロードして、HTMLファイルと同じ階層にアップロードしています。

CSS3 PIEを使ってもどうしようもないのはところもあります。

• box-shadowのinsetは使えない
• hoverには使えない
• グラデーションはIE9には対応していない

最後のIE9のグラデーションについては以下で紹介されています。

個人的にはIEのためにそこまでしたくないというのが本音です。

ということで、完全には対応できないもののある程度は対応できるけど、やっぱりもどかしいIEの話でした。

急いで作りましたが参考になれば幸いです。