(レイヤーの不透明度を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;
}
で表示させると
色違いのグラデーションがかかったボタンの完成。
背景色を変更するだけで簡単に色違いのボタンが作れます。
※IE6では透過PNG画像に対応していない為、別途対策が必要です。