:active 擬似クラスを使えば JavaScript を使わずにクリックに反応させることができます.
とはいっても見た目的な演出(Pure CSS でやれること)のみですが...

:active 擬似クラスとは？

:active 擬似クラスは, 要素がアクティブになった才のスタイルを定義します.

マウス操作の場合は, ユーザーがその要素を押して話すまでがアクティブです. キーボード操作の際は, タブキーを使ってフォーカスしたときにもマッチします.

下記のような形式で指定します.

要素:active {
  ... 
}

Examples

使用例です. Runstant Lite で作ってあるので, 直接コードをイジって遊んでみてください.

クリックに反応させてみよう

.btn:active {
  background-color: red;
}

としているので, クリック時のみ背景が赤色に変わるのがわかるかと思います.

アニメーションもつけてみよう

CSS3 から追加された transition を指定することで,
アニメーションさせることも出来ます.

クリックすると徐々に色が変わるのがわかるかと思います.