CSSで画像ボタンを押している最中は押し込み中の画像を表示したい

画像ボタンを押している最中は押し込み中の画像を表示したいです。

以下のようにすることでうまくいかないかと思ったのですが
ボタン画像は表示されるものの、ボタンを押しても画像は変化しませんでした。
「active」の使い方が誤っているのでしょうか？

◆HTML

<button class="btn-test" type="button"></button>

◆CSS

.btn-test {
    background-image : url('../assets/normal_off.png');★押し込み前の画像
    width: 60%;
    height: 12%;
}
.btn-test:active {
    background-image : url('../assets/normal_on.png');★押し込み中の画像
}