「ボタンをクリックしたときに効果を付ける」

というものが見つからなかったので、自作してみることに。
基本となるスクリプトですが、こちらの記事の

jQueryでロールオーバー！プリロード対応版

を参考にして作成してみました。

$(function(){
    $("img.action").mouseover(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
    }).mousedown(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1_push$2"))
    }).mouseout(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));
    }).mouseup(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)_push(\.[a-z]+)$/, "$1$2"));
    }).each(function(){
        $("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
    })
})

img要素にclass=”action”を指定します。

<img src="sample.png" class="action" />

上記記事と同様にロールオーバー用の画像にsample_on.png、
そしてクリック時用の画像にsample_push.png、
というようにそれぞれファイル名の最後に_on、_pushと付けた画像を用意します。

※なお場合によって不具合がでる場合があるかもしれないので、その点はご注意を。