CSSとjQueryでボタンを押した時のエフェクトを付ける

公開: 2015-04-17 03:35
更新: 2016-04-29 06:03

こんなボタンを作ってみました。

ボタン


HTMLとCSSはこんな感じです。

<div class="btn">ボタン</div>
.btn {
        display: inline-block;
        border: 1px solid #999;
        border-radius: 5px;
        padding: 7px 14px;
        cursor: pointer;
}

もちろん、

クリックしたところで何も起きません。


それでは寂しいのでクリックした時に2pxだけボタンを下がるようにします。

まずはpositionをrelativeにします。

.btn {
        ...
        position: relative;
}

クリックした後の変化を.pressedに書いておきます。

(クラス名はなんでも大丈夫です。)

.btn {
        ...
        position: relative;
}

.btn.pressed {
        top: 2px;
}

あとはjQueryでクリックされた後に.pressedを追加する処理を書きます。

//ボタンのアニメーション
$('.btn').click(function(){
        var $this = $(this);
        $this.addClass('pressed');
        setTimeout(function(){
                $this.removeClass('pressed');
        }, 500);
});

クリックしたら.pressedを追加し、
0.5秒後に.pressedを削除しています。



するとこんな感じのボタンになります。

ボタン

良い感じです。



.pressedに色々追加するだけで様々なエフェクトが作れますね。

(押下時にボタンの背景色を変えるとか)



ではでは♪



この記事をシェア
この記事にコメントする
書き込む
あっきぃ(@appstars_aki)
Web、iOSなフリーランサーです。好きなものはお寿司です。でもお寿司は高いので普段は雑草とか拾ったドングリを食べています。お仕事や意味もなく毎月お小遣いをくれる人を探してます。

お仕事の依頼や自分で作ったアプリのレビューを希望しちゃう方はaki@appstars.jpまでご連絡ください。