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

时间:2021-06-23 15:18:14

一、素材

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

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

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

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

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

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

二、效果

漂亮的自适应宽度的多色彩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背景为图片右侧。