擬似要素を使って長さに対応するボタンを作ります。

「:before, :after」の擬似要素と背景画像を右、左、中と3つ使っています。

マウスオーバー表示にも対応。

HTMl

<p class="ex_linkbtn">
<a href="#"><span>Click!!</span></a>
</p>

CSS

p.ex_linkbtn {
  display: inline-block;
  height: 34px;
  font-size: 14px;
  font-weight: bold;
}
p.ex_linkbtn a {
  display:inline-block;
    margin: 0 25px 0 10px;
  background:transparent url('img/bg_middle.png') repeat-x left top;
  height: 34px;
  color: #EEE;
  text-decoration:none;
}
p.ex_linkbtn a span{
  display:inline-block;
  padding:0 10px 0 0;
}
p.ex_linkbtn a:before, .ex_linkbtn a:after {
  display: inline-block; 
  content: "";
  height: 34px;
  background-repeat: no-repeat;
  vertical-align: middle;
}
p.ex_linkbtn a:before {
  margin-left: -10px;
  width : 10px;
  height : 34px;
  background:transparent url('img/bg_left.png') no-repeat left top;
}
p.ex_linkbtn a:after {
  margin-right: -20px;
  width : 20px;
  height : 34px;
  background:transparent url('img/bg_right.png') no-repeat left top;
}
/* hover */
p.ex_linkbtn a:hover {
  background:transparent url('img/bg_middle_on.png') repeat-x left top;
}
p.ex_linkbtn a:hover:before {
  background:transparent url('img/bg_left_on.png') no-repeat left top;

}
p.ex_linkbtn a:hover:after {
  background:transparent url('img/bg_right_on.png') no-repeat left top;
}