透過PNGを使ったボタンの作成

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

透過PNGを使って色違いのグラデーションのついたボタンを作る方法を紹介します。
まず、Photoshop等でボタンの大きさに合わせて黒から透明のグラデーションをかけたものを作成します。

(レイヤーの不透明度を50%ほどにし、切り出す幅は横方向にリピートさせるため1pxにします)

そして、以下のように記述します。

XHTML

<a href=”#” class=”button1″>ボタン</a>
<a href=”#” class=”button2″>ボタン</a>
<a href=”#” class=”button3″>ボタン</a>

CSS

 .button1{
  background:url(button.png) #310202 repeat-x left bottom;
  color:#fff;
  padding:10px 20px;
  border :solid 1px;
}

.button2{
  background:url(button.png) #00074D repeat-x left bottom;
  color:#fff;
  padding:10px 20px;
  border :solid 1px;
}

.button3{
  background:url(button.png) #004D02 repeat-x left bottom;
  color:#fff;
  padding:10px 20px;
  border :solid 1px;
}

で表示させると

色違いのグラデーションがかかったボタンの完成。

背景色を変更するだけで簡単に色違いのボタンが作れます。

※IE６では透過PNG画像に対応していない為、別途対策が必要です。