【スマホのリンクボタンはこれ】タップした感を向上させるアニメーション | SISTER WEB LAB | WEBの問題解決屋

リンクボタンのホバーアニメーションは基本的にPCでしか適用しません。 なぜならスマートフォンではリンクボタンをホバーというよりタップの操作になるのでPCと同じアニメーションを適用していても、 タップすると中途半端にアニメーションをしてリンク先のページに遷移してしまうからです。 中途半端なアニメーションが動くなら、最初から無しにしてしまうことが多いのですが、タップしたかどうかがわかりずらいので、 UXの向上の為に「タップした感」を少しでも出す事を考えました。 結論 以下が答えです。 解説 ミソとしては:activeという擬似クラスです。 簡単に言うとボタンを押して離すまでという範囲に適用されます。 詳しくはMDNにて https://developer.mozilla.org/ja/docs/Web/CSS/:active :active状態でtransformのscaleで僅かに小さくしま