用滑动门技术设计按钮的图文教程
用滑动门技术设计按钮的图文教程
发布时间:2017-01-07 来源:查字典编辑
摘要:本文为翻译文章,全文地址:http://diger.cn/article.asp?id=351原文地址:http://www.filamen...

本文为翻译文章,全文地址: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

标签:

复制代码 代码如下:

<buttonvalue="submit"class="submitBtn"><span>Submit</span></button>

CSS:

程序代码

复制代码 代码如下:

button{

border:0;

cursor:pointer;

font-weight:bold;

padding:020px00;

text-align:center;

}

buttonspan{

position:relative;

display:block;

white-space:nowrap;

padding:00020px;

}

/*bluebuttons*/

button.submitBtn{

background:url(images/btn_blue_right.gif)rightno-repeat;

font-size:1.3em;

}

button.submitBtnspan{

height:50px;

line-height:50px;

background:url(images/btn_blue_left.gif)leftno-repeat;

color:#fff;

}

button.submitBtn:hover{

background:url(images/btn_blue_right_hover.gif)rightno-repeat;

}

button.submitBtn:hoverspan{

background:url(images/btn_blue_left_hover.gif)leftno-repeat;

}

CSSForIE6和IE7(有时候需要)

复制代码 代码如下:

button{

width:auto;

overflow:visible;

}

buttonspan{

margin-top:1px;

}

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

浏览器支持:

IE6,IE7,Firefox(mac/pc),Safari,Opera,Camino等等。

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类