我们都知道现在CSS3的属性border-radius很方便的就可以制作出圆角按钮的效果,但是就目前浏览器的市场占有率来讲,直接使用CSS3的效 果还是不理想的,因为目前Opera10、IE6-8都是不支持CSS3的圆角属性,所以,在这里总结下我平时工作中时使用的方法。
一般来说,当我们纵观整个页面,如果不需要共用按钮的背景,我们可以直接连带着文字整个切下来,但是有时候页面中许多按钮的背景是一样的,高度一致,只是按钮上的文字不一样,这个时候,一般我会使用以下3种方法去制作这个按钮:
在这里拿这个按钮作为例子
一、直接使用input
<input type="button" class="applyBtn" value="申请职位"/>
input{
width:138px;
height:40px;
padding-bottom:2px;
*padding:0;
font:17px/40px "微软雅黑";
color:#fff;
background:url(http://pic2.58.com/ui7/job/hire/hireinfo.gif) 0 -77px no-repeat;
cursor:pointer
}
这里width和高度是一定要的,如果input宽度用padding代替的话,firefox和谷歌、IE会有1px的差别,IE6/IE7下使用padding,宽度会明显大于其他的浏览器下的按钮,所以宽度最好是定义的;
就文字的高度位置而言,firefox识别不了line-height,所以位置会下移,这里的padding-bottom是针对firefox的,谷歌和IE7-IE9不识别此属性,但是IE6收到了影响,所以可以利用css hack来解决。
当这一类按钮的宽一致时,这样使用是没有问题的,如果只是背景色相同,宽度不同,想要单切背景且重复利用,这种方法就不能达到背景共用的要求
二、使用<label><input></input></label>
<label>
<input value="保存" type="button">
</label>
label{
display:inline-block;
padding-left:2px;
background:url(http://pic2.58.com/ui7/job/hire/hire_sp_btn.gif) no-repeat 0 -171px;
}
input{
width:84px;
height:35px;
padding:0 2px 4px 0;
*padding-bottom:0;
background:url(http://pic2.58.com/ui7/job/hire/hire_sp_btn.gif) no-repeat right -171px; font:16px/35px "微软雅黑";
color:#fff;
cursor:pointer;
}
label要变为行内块元素,或者直接设为块元素+固定宽度,效果是一样的,padding-left是用来放置左边的圆角的;
input里的宽高和上面直接用input来设置时需要注意的事项一致,需要说明的是为了使文字居中,要给padding-right值。
三、使用<a><span></span></a>
<a><span>保存</span></a>
a{
display:inline-block;
padding-left:2px;
background:url(http://pic2.58.com/ui7/job/hire/hire_sp_btn.gif) no-repeat 0 -171px;
}
span{
display:inline-block;
padding:0 42px 0 40px;
background:url(http://pic2.58.com/ui7/job/hire/hire_sp_btn.gif) no-repeat right -171px;
font:16px/35px "微软雅黑";
color:#fff
}
使用这个结构,可以发现,不必要再设置span的宽度,直接用padding值来表示,可以达到按钮宽度根据内容自适应,并且个浏览器表现是一致的;
高度上也不用写hack了,直接设置line-height就可以了,连height也可以省略掉。
当然还有很多种写法,可以使用别的标签,也可以使用别的结构,比如分为三个部分,左右圆角各位一个dom,中间部分是一个dom,主要根据实际情况来选择表现方法吧
相关推荐
HTML5 CSS3制作的带图标的不规则按钮,这些不规则的形状其实是有规则的,像圆角、椭圆、梯形等,只不过是印象中比矩形的按钮稍微些,但是这些按钮应用在网页上,感觉很有个性哦,让人眼前一亮的感觉,按钮是带有图标...
使用CSS3制作漂亮的圆角按钮是一款纯CSS3实现的圆形修变按钮特效。
Dreamweaver怎么用CSS制作圆角按钮?Dreamweaver中想要制作一个圆角按钮,鼠标经过按钮按钮变色,该怎么制作这个效果呢?下面我们就来看看详细的教程,需要的朋友可以参考下
这是一组共78个使用纯CSS3制作的方形圆角立体质感按钮。这些按钮都带有3D立体质感,按钮上的图标使用Zocial字体图标制作。这些按钮都带有鼠标滑过样式和鼠标点击样式,可以直接使用。
使用CSS3制作漂亮的圆角按钮是一款纯CSS3实现的圆形修变按钮特效。
CSS3通过样式定义制作的50个圆角渐变效果的网页按钮.zip
近100款漂亮CSS3/HTML5按钮合集,圆角,水晶按钮,红色的,黑色的,黄色的,各种颜色的,另外还都是圆角的按钮,用CSS3纯代码制作的菜单,无使用任何修饰性图片,想当八错。
一种是纯线条风格,支持鼠标的响应效果,第二种是实心填充的圆角按钮动画,同样支持鼠标悬停时的动画效果,两款效果都自带了演示文件和CSS3代码,方便你学习CSS3的动画制作技巧,面向CSS3前端开发初学者。...
这是一款使用使用CSS3 线性渐变来制作的超酷彩色3D按钮样式。这组按钮分为不同的颜色,尺寸和圆角,使用时只需要添加相应的class类即可,简单实用。
CSS3圆形修边渐变按钮特效是一款纯CSS3制作的彩色渐变按钮悬停动画设计,圆角按钮悬停交互特效。
这是一款使用使用CSS3 线性渐变来制作的超酷彩色3D按钮样式。这组按钮分为不同的颜色,尺寸和圆角,使用时只需要添加相应的class类即可,简单实用。
6.4 制作圆角框 157 6.5 小结 159 第7章 表单样式设计 160 7.1 表单样式设计 161 7.1.1 表单透明化 161 7.1.2 增加表单中的空隙 162 7.2 表单元素样式设计 163 7.2.1 文本框样式 163 7.2.2 文本域样式 166 7.2.3 ...
这是一款使用使用CSS3 线性渐变来制作的超酷彩色3D按钮样式。这组按钮分为不同的颜色,尺寸和圆角,使用时只需要添加相应的class类即可,简单实用。
2.jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3.jQuery+CSS实用图片收缩与放大效果插件 4.jquery+div实现同时滑动切换的图文展示特效插件下载 5.jquery+div带动画按钮图片手动与自动切换的特效...
蓝色圆角按钮个人博客模板基于arial.js和cufon-yui.js插件制作,DIV+CSS布局设计,全套模板,包含首页、技术支持、关于我们、博客、联系我们等网站模板页面。
多种CSS制作的图标,按钮,圆角的表现样式
按钮.htm 表单按钮的用法。 表单基本语法.htm 表单基本语法。 表单两属性.html 表单两属性用法。 单选框.htm 表单单选框用法 多行文本域.htm 表单多行文本域用法。 复选框.htm 表单...
《网页设计与制作:Flash Dreamweaver Firework(计算机应用与软件技术专业)》的编写打破了传统的学科体系,以项目为中心,不强求理论体系的完整性,以够用为度,以是否实用为标准。全书以创建一个公司的综合网站为...