CSS 或 HTML5 图像更改 onClick

Question

我想要一个简单的效果，如本网站上的登录/注册按钮所示:

http://css-tricks.com/forums/entry/register

我已经在这个页面上尝试过“检查元素”，但无法弄清楚它是如何实现的。

即将鼠标悬停在它们上面，它们会发生微妙的变化。单击它们，只要您按住鼠标键，它们就好像被“压入”了一样。松开鼠标键，它们就会弹出。

目前使用 javascript 解决方案但不是很满意。宁愿把 javascript 排除在外。太多的努力试图让它在 Chrome 和 IE 中工作。

Answer 1

我想你指的是事件状态。 Fiddle .

.button, #rcp_submit {
    display: inline-block;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: #4e68c7;
    box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891, 2px 3px 1px #3852b1, 4px 3px 1px #203891, 3px 4px 1px #3852b1, 5px 4px 1px #203891, 4px 5px 1px #3852b1, 6px 5px 1px #203891;
    color: white;
    white-space: nowrap;
    font-family:'Gotham Rounded A', 'Gotham Rounded B', "proxima-nova-soft", sans-serif;
    padding: 9px 16px;
    line-height: 1.4;
    position: relative;
    top: -5px;
}
.button:hover, .button:focus, #rcp_submit:hover, #rcp_submit:focus {
    color: white;
    background: #3d57b4;
}
.button:active, #rcp_submit:active {
    box-shadow: 1px 0px 1px #203891, 0px 1px 1px #3852b1, 2px 1px 1px #203891, 1px 2px 1px #3852b1, 3px 2px 1px #203891;
    -webkit-transform: translate(3px, 3px);
    -moz-transform: translate(3px, 3px);
    -ms-transform: translate(3px, 3px);
    -o-transform: translate(3px, 3px);
    transform: translate(3px, 3px);
}