「: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; }