web按钮的不同状态

以上截图，是button按钮在xp的firefox浏览器下的不同状态，如果用css来描述，从上到下分别为：

button {} //默认
button:hover {} //鼠标经过
button:focus  {} //焦点状态
button:active {} //点击按下状态

javascript对dom的事件状态更加丰富，用js来定义图片中的状态，分别是：

//默认无事件
btn.onmouseover //鼠标进入按钮范围
btn.focus //按钮获取到焦点
btn.onmousedown //按钮被鼠标按下

按钮对键盘的回车，也会相应状态，为什么按钮会有这么多的状态，事实上这些相应的状态，也是对用户点击鼠标按键的物理动作的对应，计算机从图形对用户的操作作出的反馈，越接近物理事件的现象，用户的的学习成本越低，理解也更容易。

我在使用一些网站的体验中，很多按钮的设计只有一种默认状态，有的会有默认和鼠标经过的状态，但是点击按钮这个动作其实很关键，直接关系到用户判断自己是否点击正确（或者点击成功）。

可以看下苹果的官方网站的导航设计，这个例子是比较完美的：

豆瓣的链接的CSS，其实链接也是按钮，在没有图片修饰的情况下，通过文字的颜色、背景色、是否下划线，也可以反馈用户的操作：

 

a:link{coloe:#336699;text-decoration:none}
a:visited {color:#666699;text-decoration:none}
a:hover{color:#FFFFFF;background-color:#003399}
a:active{color:#FFFFFF;background-color:#FF9933}

另外，用CSS处理图片修饰的按钮时，IE6的处理伪类:active时，按下并松开鼠标按键之后，样式不会恢复到默认样式，修复这个BUG可以javascript来处理，很简单粗暴：

 

btn.blur() //强制按钮失去焦点，恢复默认样式