漂亮的自适应宽度的多色彩CSS图片按钮

一、素材

  

 

 

 

 

  

二、效果

三、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背景为图片右侧。