css - CSS 或 HTML5 图像更改 onClick

Question

我想要一个效果，就像这个网站上的登录/注册按钮显示的那样：

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

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

即悬停在它们上方，它们会发生微妙的变化。单击它们，只要您按住鼠标键，它们似乎就被“按下”了。释放鼠标键，它们会弹出。

目前使用 javascript 解决方案，但对它不是很满意。宁愿离开javascript。试图让它在 Chrome 和 IE 中工作的努力太多了。

Answer 1

我想你的意思是活跃状态。小提琴。

.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);
}