一、素材

  

 

 

 

 

  

二、效果

三、CSS

*{padding:0;margin:0}

/*----------------------------------- 自适应宽度图片按钮 ---------------------------------------*/

.button {

    display:inline-block;

}

.button span

{

    display: inline-block;

    height: 47px;

    padding: 0px 0px 0px 32px;

    background: url(Images/button-left.png) no-repeat 0px 0px;

    font: bold 12px/21px 宋体, Arial, Helvetica, sans-serif;

    text-align: center;

    color: rgb(132, 104, 142);

    white-space: nowrap;

}

.button span span {

    height: 37px;

    padding: 10px 32px 0px 0px;

    background: url(Images/button-right.png) no-repeat scroll 100% 0px transparent;

}

.pink span {background:transparent url(Images/pink-left.png) 0 0 no-repeat;}

.pink span span {background:transparent url(Images/pink-right.png) 100% 0 no-repeat;}

.yellow span {background:transparent url(Images/yellow-left.png) 0 0 no-repeat;}

.yellow span span {background:transparent url(Images/yellow-right.png) 100% 0 no-repeat;}

.blue span {background:transparent url(Images/blue-left.png) 0 0 no-repeat;}

.blue span span {background:transparent url(Images/blue-right.png) 100% 0 no-repeat;}

.green span {background:transparent url(Images/green-left.png) 0 0 no-repeat;}

.green span span {background:transparent url(Images/green-right.png) 100% 0 no-repeat;}

.red span {background:transparent url(Images/red-left.png) 0 0 no-repeat;}

.red span span {background:transparent url(Images/red-right.png) 100% 0 no-repeat;}

.imgButton

{

  border:0 none;

}

四、HTML

<div>

    <a href="#" class="button"><span><span>按钮</span></span></a>

    <a href="#" class="button blue"><span><span>图片按钮</span></span></a>

    <a href="#" class="button green"><span><span>自适应宽度的图片按钮</span></span></a>

    <a href="#" class="button pink"><span><span>自适应宽度的多色彩图片按钮</span></span></a>

    <a href="#" class="button yellow"><span><span>自适应宽度的多色彩CSS图片按钮</span></span></a>

    <a href="#" class="button red"><span><span>漂亮的自适应宽度的多色彩CSS图片按钮</span></span></a>

</div>

<div>

    <button type="button" class="button yellow imgButton"><span><span>按钮</span></span></button>

    <button type="button" class="button pink imgButton"><span><span>图片按钮</span></span></button>

    <button type="button" class="button blue imgButton"><span><span>自适应宽度的图片按钮</span></span></button>

    <button type="button" class="button green imgButton"><span><span>自适应宽度的多色彩图片按钮</span></span></button>

    <button type="button" class="button red imgButton"><span><span>自适应宽度的多色彩CSS图片按钮</span></span></button>

    <button type="button" class="button imgButton"><span><span>漂亮的自适应宽度的多色彩CSS图片按钮</span></span></button>

</div>

五、说明

一、素材是从一个按钮图片一切为二的，左边图片是32*47，右边图片是300*47，所以，这个图片按钮，最短可为64px，最长可为332px；

二、制作的关键是HTML中文字由两个<span>标签包围，外面的span背景为图片左侧，里面的span背景为图片右侧。