|
翻译原文：
http://diger.cn/article.asp?id=359
英文原文：
http://particletree.com/features/rediscovering-the-button-element/
对每一个程序设计者来说，为用户创建一个统一的界面是一个不变的追求。网站中建立一致性是特别困难的，根据浏览器和操作系统的严重不同，几而且乎什么能做和不能做是任意的，所以视觉表现也很不一样。在任何地方比你处理表单元素时和建立标准的外观的战斗中最大的失败变得更加显然的就是最有名的提交按钮。
照现在这个样子，用Type="submit"输入即丑陋(Firefox)，还有点神病(Internet Explorer)或者十分玩固(Safari)。用的最多的办法是使用图片输入和我们自己创建这个该死的东西。这是很不幸的，因为每次我们需要一个新的按钮时就要被迫于打开Photoshop的单调乏味。我们需要的是一些更好的东西——一些对设计者更加灵活和有意义的东西。幸运的是解决方案已经有了而且它只需要一点爱，我的朋友们，请允许我介绍我的小朋友给你吧：
这个有用的原因是网页程序中的许多动作是依靠激发的，因而通过一个链接简单的发送一个用户到一个特殊的URL将引发它们需要做的动作。使用样式可以为两个元素（链接和按钮）工作，无论是用于AJAX或者标准提交都能给我们保持交互方法的一致和适当的灵活性。
只是一个短暂旁白，你可能想知道为什么在那些图片中我让ALT标签空白呢。可能会觉得惊奇于alt属性在每个图片都是必须的，事实上不是这样的。空的alt属性是完全有效的和有利于屏幕前的人知道哪些信息是有效忽略，当你的用户努力寻找下一个目标时节省他们的宝贵时间。由于这些图标确实是多余的，我宁愿不去浪费用户睐接收我使用的图片而不是接着呈现出来。他们将只会收到“Submit”而不是“Checkmark Submit”，那确实会让事情变的有点乱。
CSS
在极大程度上，控制那些按钮的CSS是相当直截的。浏览器间丝发般的差别导致了一定数量的填充差距，不过天下没有不可能的事儿，对你来说幸运的是，它已经解决了。
/* BUTTONS */
.buttons a, .buttons button{
display:block;
float:left;
margin:0 7px 0 0;
background-color:#f5f5f5;
border:1px solid #dedede;
border-top:1px solid #eee;
border-left:1px solid #eee;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:100%;
line-height:130%;
text-decoration:none;
font-weight:bold;
color:#565656;
cursor:pointer;
padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
width:auto;
overflow:visible;
padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
padding:5px 10px 5px 7px; /* Firefox */
line-height:17px; /* Safari */
}
*:first-child+html button[type]{
padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
margin:0 3px -3px 0 !important;
padding:0;
border:none;
width:16px;
height:16px;
}
当这些运行的时候有一件事情会发生，那就是在InternetExplorer中在显示长按钮时有个显示错误。你可以在Jehiah.cz中读到相关信息，但是它正是一些宽度和上面声明的溢出的原因。
加点儿颜
在Wufoo中，我们为中性动作的把Hover颜色定为蓝色，把绿色和红色用作正面和负面的连接。下面是我们创建的处理意味着正面的例如添加和保存的按钮和负面的如取消和删除的按钮。这对我们来说是种很好的感觉，同时明显的你也可以挑选你喜欢的颜色。
/* STANDARD */
button:hover, .buttons a:hover{
background-color:#dff4ff;
border:1px solid #c2e1ef;
color:#336699;
}
.buttons a:active{
background-color:#6299c5;
border:1px solid #6299c5;
color:#fff;
}
/* POSITIVE */
button.positive, .buttons a.positive{
color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
background-color:#E6EFC2;
border:1px solid #C6D880;
color:#529214;
}
.buttons a.positive:active{
background-color:#529214;
border:1px solid #529214;
color:#fff;
}
/* NEGATIVE */
.buttons a.negative, button.negative{
color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
background:#fbe3e4;
border:1px solid #fbc2c4;
color:#d12f19;
}
.buttons a.negative:active{
background-color:#d12f19;
border:1px solid #d12f19;
color:#fff;
|
两性生活
