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

(レイヤーの不透明度を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画像に対応していない為、別途対策が必要です。