javascript - 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;
}

如上所述，

margin-top 和 left 增加，而其他边设置为 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;