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;