一、素材
二、效果
三、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背景为图片右侧。
分享到:
相关推荐
呵呵 很好哦 css自适应宽度的按钮!
圆角按钮宽度自适应 自适应宽度的CSS圆角背景的按钮
CSS自适应宽度按钮! 很值得下载看看!资源免费,大家分享!!
根据文字宽度,背景图片自适应,用a标记实现
CSS自适应宽度按钮
主要为大家介绍了CSS实现自适应宽度的菜单按钮效果代码,实例分析了css针对页面自适应宽度的相关设置技巧,具有一定参考借鉴价值,需要的朋友可以参考下
CSS3漂亮的圆角自适应长度按钮特效,按钮可跟随文字数量的多少自动适应宽度。
CSS自适应宽度圆角按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html <head> <meta ...
div+css实现自适应宽度按钮
有兴趣刚需的可以自己下载,非常实用的特效代码,可以完美运行,有能力的还可以二次修改!
求点击父页面的一个按钮以后,整个父页面向左移动,左侧则用来显示图片,结果dialog和原页面不在一个层上,dialog直接弹出的,并不在div里边,下面有个不错的解决方法,大家可以参考下
CSS3带关闭按钮登录窗口代码是一款简单实用的网站登录表单布局样式,还可以自适应浏览器宽度。
鄙人在写一个项目,发现成功将数据在页面显示后, 高度没有自适应,而是将一些按钮遮挡了,不断的调试和网上寻找解决办法,发现没有效果,最后添加了一句css <style> .layui-table-cell{ display:table-...
最近公司在做一个家具行业的管理系统,需要做一个像播放幻灯片的功能来展示产品,我就做了一个图片自动播放的小程序功能,从明确目的到完成花了我一个班的时间。功能描述:页面打开时,图片自动播放,点击右边面板中...
日常工作时,我们可能遇到这样一个布局:一个父元素框框(随着浏览器大小自适应宽度)里面有许多按钮,然后这些按钮(宽度固定)的整体需要在父元素内居中对齐,而按钮整体的内容又是从左往右排列。这里提供一个解决...
但是很多情况下,在移动端的设计里,图片的宽度随着不同的移动设备进行改变的,这个时候就需要用到自适应的正方形的实现。 下面介绍两种比较简单的实现方法: 方法一:CSS3 vw 单位,vw是相对于视口的宽度。视口被均...
9.5.3 二列右列宽度自适应 208 9.5.4 二列固定宽度居中 209 9.6 三列布局 210 9.6.1 中列宽度自适应 210 9.6.2 三栏布局 212 9.7 高度自适应 215 9.8 小结 216 第4篇 实战演习 第10章 div+CSS打造Blog版面 218 10.1 ...
4.7.2 CSS按钮 4.7.3 图片翻转链接 4.7.4 面包屑导航链接 第5章 CSS内容排版 5.1 文字排版 5.1.1 通栏排版 5.1.2 分栏排版 5.2 图文混合排版 5.2.1 图片基础控制 5.2.2 不规则文字环绕 5.3 全图排版 5.4 表格排版 ...