CSS/JavaScript如何在点击/鼠标悬停事件上创建下推效果

Question

当您通过gmail或类似方式登录stackoverflow.com时。，当你点击gmail按钮时，它似乎被按下了。

你是如何达到这种效果的？

我知道如何使用CSS3，使一些东西看起来凸起使用下降阴影。但是你如何让它看起来向下移动。

看起来他们正在移除阴影，同时将div移动到阴影的前一个位置。

然而，我更喜欢更连续的效果。我只需要在现代浏览器中使用它。

此外，他们在悬停事件上移动，我需要它在点击事件上。

Answer 1

这是按钮的CSS。不需要JS。

.login-page .openid_large_btn {
    width: 100px;
    height: 60px;
    border: 2px solid #DDD;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    margin: 3px;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 2px 2px 4px #ddd;
    -moz-box-shadow: 2px 2px 4px #ddd;
    -webkit-box-shadow: 2px 2px 4px #ddd;
}
.login-page .openid_large_btn:hover {
    margin: 4px 0px 0px 6px;
    border: 2px solid #999;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
element.style {
    background: #fff url(http://cdn.sstatic.net/Img/openid/openid-logos.png?v=8);
    background-position: -1px -1px;
}

如上所述，

顶部和左侧的边距增加，而另一侧设置为0，从3px:

margin: 4px 0px 0px 6px;

边界变暗：

border: 2px solid #999;

阴影被移除：

box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;

Answer 2

要添加转换，请添加以下内容：

.login-page .openid_large_btn {
    -webkit-transition: all 0.05s ease-in-out;
       -moz-transition: all 0.05s ease-in-out;
         -o-transition: all 0.05s ease-in-out;
            transition: all 0.05s ease-in-out;