CSSでクリックすると凹むボタンの罠
立体的で、押すと凹んだように見せるボタン、たまに見かけると思います。
それをCSSでやろうとすると、こんな感じになるかと思います。
- ボタンに
box-shadow
をつけて立体的に見せる :active
でbox-shadow
を外し、かつtranslateY
やtop
あたりでボタンをbox-shadow
の高さ分動かす
記事なんかでもたまに見かけます。
こんなやつです。
See the Pen press effect button by Masataka SUZUKI (@suzukima) on CodePen.
ぱっと見それっぽくできてて、たまに使ってたんですが、ちょっとした罠があることに気づいてしまいました。
ボタンの上ギリギリをクリックしようとすると、ボタンの移動によりフォーカスが外れ、ボタンのクリックがキャンセルされてしまうのです。上のCodePenで試してもらえれば。うまく押せるとalertが出ます。
ボタンクリックしたはずなのに、たまに反応しないと結構イライラさせてしまいます。これどうにかしたかったのですが、いい感じの対処方法が思いつきませんでした。何かでラップするのは無しで。今回はこの立体に見せるやつを止めてしまったという敗北。
ちなみに::before
で見えないボックスをはみ出させればなんとかなるかなと考えたのですが、対象のシステム、なんとボタンにinput
要素使ってまして、::before
使えませんでした。つらい…