オンマウスでボタンのコントラストを上げるために色を増やすのは嫌だなと考えていたが、filterプロパティーが簡単そうだ。色モードの変更にもそのままで機能する。ボタンの背景色が白や黒でない限り、汎用的に使える。
button:hover {
filter: contrast(1.5);
}ボタンをオンマウスでどう変化すべき(または変化させないべき)かというのは意見が一致しない。セケンではハイライトを当てる実装が多い。僕は、それだと白背景の場合に目立たなくなるので否定的だ。
ボタンを操作する時に指をのせるという行為のメタファーと考えると、指の影で暗くなるのが自然にも思える。しかし、そのままボタンを暗くし、ボタンの文字も暗くしてしまうと、操作しづらくなってしまうだろう。
ボタンに指をのせることで、そこに目の焦点が合い、相対的に強調されるというのが、実情に近い。それを考えるとコントラストを上げることを主眼にして、変化させるのが良いはずだ。その実装としてfilterプロパティーでcontrast()関数を使うことは理にかなっている。