繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 用滑动门技术设计按钮的图文教程
- CSS样式表
- Class与ID区别 margin和padding区别 CSS学习笔记
- 鼠标滑过缩略图时放大图片（纯Css）
- 网页中经常用到的Metas, Links and DocTypes集合
- 修正IE下使用CSS属性overflow的bug
- xhtml+css制作不规则导航
- CSS规则层叠时的优先级算法
- CSS规则层叠的应用 css必须要注意的几点
- CSS Hack收集汇总
- line-block的运用最小宽度的设置
- IE对CSS样式表的限制分析与解决方案
- 全国哀悼日网站页面变成灰色的filter方法
- css滤镜实现页面灰色黑白色效果代码
- 用CSS开发时髦的导航栏图例教程
- 用CSS开发时髦的导航栏第二篇
- CSS渐变文本效果的两种方法比较
- 提高CSS文件可维护性的五种方法总结
- css Sprites小实例代码
- 美化html段落文本 Ⅰ
- html页面中图像格式的选用之我见
- DIV+CSS实现的滑动门菜单特效代码
CSS样式表 中的 用滑动门技术设计按钮的图文教程
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 235 ::
收藏到网摘: n/a
本文为翻译文章，全文地址：http://diger.cn/article.asp?id=351
原文地址：http://www.filamentgroup.com/lab/buttonElement/
Particle Tree 最近发布了一篇文章描述了一种他们拿出的设计按钮元素的技术，对于那些不熟练的人来说，表格按键是出了名的难以定制。典型的解决方案是使用浏览器提供的默认按钮，或者是使用一个图形输入。当图形输入完成了需求结果时，它请求创建一个新的图形为每一个按钮用它的文本“Baked-in”（没有提及以hovers交换它）。
尽管Particle Tree的技术提供了一种可靠的方案，它不能满足我们的需求。我们需要一种使用了滑动门技术的按钮，一种真正的HTML文本，不需要请求JavaScript转滚或者提交表格。满足这些条件就意味着input和anchor元素被排除了。很显然,按钮元素正是我们唯一的选择。下面的技术示范了一种使用滑动门技术的跨浏览器的按钮的技术。
查看Demo
标签：
复制代码 代码如下:
<button value="submit" class="submitBtn"><span>Submit</span></button>
CSS：
程序代码
复制代码 代码如下:
button {
border:0;
cursor:pointer;
font-weight:bold;
padding:0 20px 0 0;
text-align:center;
}
button span {
position:relative;
display:block;
white-space:nowrap;
padding:0 0 0 20px;
}
/*blue buttons*/
button.submitBtn {
background:url(images/btn_blue_right.gif) right no-repeat;
font-size:1.3em;
}
button.submitBtn span {
height:50px;
line-height:50px;
background:url(images/btn_blue_left.gif) left no-repeat;
color:#fff;
}
button.submitBtn:hover {
background:url(images/btn_blue_right_hover.gif) right no-repeat;
}
button.submitBtn:hover span {
background:url(images/btn_blue_left_hover.gif) left no-repeat;
}
CSS For IE6和IE7（有时候需要）
复制代码 代码如下:
button {
width:auto;
overflow:visible;
}
button span {
margin-top:1px;
}
浏览器支持：
IE6，IE7，Firefox(mac/pc)，Safari，Opera，Camino等等。
警告：为了使hover在IE6中有效，你将需要编写一个类触发器。尽管不像图片交换一样糟糕。
评论 (0) All
