CSSでボタンを作る際にハマった話

　ボタンを作るのに画像を使うのは面倒。CSSでなんとかしようとする。せめてマウスカーソルを載せたら色が変わるとかするといいかなあ。とか思いつつ。
　という感じで作ったのが「なんでもスライドアニメーション効果、jQueryでカルーセル「carouFredSel」がすごいよ」の、コントロール用ボタンだった。
　ボタンでトリガーされる動作は、jQueryプラグイン側で受け持ってくれるので、こっちは見た目だけを気にすればいい。
　a:hoverとかで背景色変えればいいか、とか思ったらそう簡単にはいかないのだった。

　hoverが効くのはaタグのみ。でもって、aにはhref属性が必要。というか、Chromeではhref属性がなくても背景色変えられたのだけど、IE9 ではhref属性が必須だった。
　また、a:activeも設定してみたんだけど、これまた失敗。クリックしたタイミングでボタンのアンカーテキスト（例では「◀」と「▶」）の色を変えようということなんだけど、たしかにクリックすると色は変わる。でも、IEではクリックし終わっても色が戻らないのだ。こりゃだめだ。ということで、これはやめることにした。
　とりあえず、ボタンっぽい感じに見えるからいいか。と思ってiPadでなにげに見ると、タップしたあと、ボタンの背景色が元に戻らない。hoverとかいう概念がないからやっぱり動作は変わってくるわけだよなあ。ということで、また失敗。
　これ以上はまたJavaScript書かなくちゃ、ということになるので、ここでやめとく。
　もっと簡単にできると思ったんだけどなあ。
　あとで時間があったら続く、ということで。
　今の時点ではこんな感じだ（上記リンクにあるものと同じ）。