0

いくつかの機能を備えたボタン (クリックすると別のページにリンクするだけ) を作成する方法を知りたいです。

1）ボタンはテキストのない画像ボタンです

2）ユーザーがボタンの上にマウスを置いたとき、ボタンがスムーズに上向きにアニメーション化されるようにしたいので、以前の場所から少し（おそらく20px？）浮かびます。

3) ボタンがホバリングすると、ベースラインに小さな影が落ちるはずです。影の境界線ではなく、ドロップシャドウを意味します。真昼の太陽が上にあり、地面に下向きの楕円のような影を落としているかのような影です。

本質的に、私は非常に美的な感触を持つボタンを探しています. JavaScript または jquery ソリューションが最適です。

前もって感謝します！

（私はこれをたくさんグーグルで検索したことに言及する必要がありますが、ボタンの機能を説明するための最良の用語は「ホバリング」であり、実際に表示されるボタン「ホバリング」ではなく、マウス「ホバリング」実装に関連するすべての結果を取得します）

4

1 に答える 1

0

css を使用したトランジションとボックスの sadhow の基本的な例を次に示します。マージンとトランジションを使用して、ボタンを上向きにアニメーション化できます。

html

<button></button>

CSS

button {
    display: block;
    margin-top: 20px;
    height: 40px;
    width: 60px;
    color black;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    transition: all 200ms linear;
    border: none;
    background-image: url('your image');
}
button:hover {
    margin-top: 0px;
    -moz-box-shadow: 0px 0px 4px 1px grey;
    -webkit-box-shadow: 0px 0px 4px 1px grey;
    box-shadow: 0px 0px 4px 1px  grey;
}

フィドルhttp://jsfiddle.net/caknopal/mmr4F/

js の場合、jquery animate を使用してボタンをアニメーション化できます。

CSS

button.hover {
    -moz-box-shadow: 0px 0px 4px 1px grey;
    -webkit-box-shadow: 0px 0px 4px 1px grey;
    box-shadow: 0px 0px 4px 1px  grey;
}

js

$('button').on('mouseover', function(){
    $(this).animate({'margin-top':0}, 200);
    $(this).addClass('hover');
});
$('button').on('mouseout', function(){
    $(this).animate({'margin-top':20}, 200);
    $(this).removeClass('hover');
});

フィドルhttp://jsfiddle.net/caknopal/mmr4F/3/

于 2013-03-19T07:46:30.800 に答える