用滑动门技术设计按钮的图文教程_经验交流

来源：动视网责编：小采时间：2020-11-27 18:55:02

用滑动门技术设计按钮的图文教程_经验交流

用滑动门技术设计按钮的图文教程_经验交流:本文为翻译文章，全文地址：http://diger.cn/article.aspid=351原文地址：http://www.filamentgroup.com/lab/buttonElement/Particle Tree 最近发布了一篇文章描述了一种他们拿出的设计按钮元素的技术，对于那些不熟练的人来说，表格按键是出了名的难以定制

推荐度：

点击下载本文 文档为doc格式

导读用滑动门技术设计按钮的图文教程_经验交流:本文为翻译文章，全文地址：http://diger.cn/article.aspid=351原文地址：http://www.filamentgroup.com/lab/buttonElement/Particle Tree 最近发布了一篇文章描述了一种他们拿出的设计按钮元素的技术，对于那些不熟练的人来说，表格按键是出了名的难以定制

本文为翻译文章，全文地址：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; 
}

就像你能看到的那样，每个状态使用了2个图片（总共4个图片）。进一步简化，可以将这些状态转化为两个。但这种想法的最初测试出现了不一致的结果。

浏览器支持：
IE6，IE7，Firefox(mac/pc)，Safari，Opera，Camino等等。

警告：为了使hover在IE6中有效，你将需要编写一个类触发器。尽管不像图片交换一样糟糕。

用滑动门技术设计按钮的图文教程_经验交流

推荐度：

点击下载本文 文档为doc格式

标签：制作使用设计

热门焦点

用滑动门技术设计按钮的图文教程_经验交流

用滑动门技术设计按钮的图文教程_经验交流

用滑动门技术设计按钮的图文教程_经验交流

最新推荐

猜你喜欢

热门推荐