0

このウェブサイトのサインイン/登録ボタンで表示されるような単純な効果が欲しいです:

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

このページで「Inspect Element」を試しましたが、それがどのように達成されているかわかりません。

つまり、カーソルを合わせると微妙に変化します。それらをクリックすると、マウス キーを押している間、それらが「押し込まれた」ように見えます。マウス キーを離すと、元に戻ります。

現在JavaScriptソリューションを使用していますが、あまり満足していません。JavaScript を除外することをお勧めします。IEだけでなくChromeでも動作させるには多大な努力が必要です。

4

1 に答える 1

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);
}
于 2013-06-23T20:49:20.777 に答える