鴨のいいカモです

ここでアヒルの話題は出てきません。予めご了承下さい。

CSSでクリックすると凹むボタンの罠

立体的で、押すと凹んだように見せるボタン、たまに見かけると思います。

それをCSSでやろうとすると、こんな感じになるかと思います。

  • ボタンにbox-shadowをつけて立体的に見せる
  • :activebox-shadowを外し、かつtranslateYtopあたりでボタンをbox-shadowの高さ分動かす

記事なんかでもたまに見かけます。

こんなやつです。

See the Pen press effect button by Masataka SUZUKI (@suzukima) on CodePen.

ぱっと見それっぽくできてて、たまに使ってたんですが、ちょっとした罠があることに気づいてしまいました。

ボタンの上ギリギリをクリックしようとすると、ボタンの移動によりフォーカスが外れ、ボタンのクリックがキャンセルされてしまうのです。上のCodePenで試してもらえれば。うまく押せるとalertが出ます。

ボタンクリックしたはずなのに、たまに反応しないと結構イライラさせてしまいます。これどうにかしたかったのですが、いい感じの対処方法が思いつきませんでした。何かでラップするのは無しで。今回はこの立体に見せるやつを止めてしまったという敗北。

ちなみに::beforeで見えないボックスをはみ出させればなんとかなるかなと考えたのですが、対象のシステム、なんとボタンにinput要素使ってまして、::before使えませんでした。つらい…