1

gmail などで stackoverflow.com にログインすると、gmail ボタンをクリックすると、ボタンが押し下げられたように見えます。

この効果をどのように達成しますか？

CSS3 を使用して、ドロップ シャドウを使用して何かを浮き上がらせて見せる方法を知っています。しかし、どうやって下に移動するように見せますか。

影を削除していると同時に、divを影の前の場所に移動しているようです。

しかし、私はより継続的な効果を好みます。これは、最新のブラウザーで動作するためにのみ必要です。

また、それらはホバーイベントで移動しています。クリックイベントで必要です。

4

2 に答える 2

3

ボタンの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 が増加し、他の辺は 3px から 0 に設定されます:

margin: 4px 0px 0px 6px;

境界線が暗くなります:

border: 2px solid #999;

影が削除されます:

box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
于 2013-02-15T03:43:28.887 に答える
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;
于 2013-02-15T04:11:11.810 に答える