【スマホのリンクボタンはこれ】タップした感を向上させるアニメーション

公開日：2022/08/23

【スマホのリンクボタンはこれ】タップした感を向上させるアニメーションのサムネイル画像

リンクボタンのホバーアニメーションは基本的にPCでしか適用しません。

なぜならスマートフォンではリンクボタンをホバーというよりタップの操作になるのでPCと同じアニメーションを適用していても、
タップすると中途半端にアニメーションをしてリンク先のページに遷移してしまうからです。

中途半端なアニメーションが動くなら、最初から無しにしてしまうことが多いのですが、タップしたかどうかがわかりずらいので、
UXの向上の為に「タップした感」を少しでも出す事を考えました。

結論

以下が答えです。

a{
 transition: transform .2s;
 &:active{
  transform: scale(.95);
 }
}

ミソとしては:activeという擬似クラスです。
簡単に言うとボタンを押して離すまでという範囲に適用されます。

:active状態でtransformのscaleで僅かに小さくします。これによりボタン全体が少し縮小し、一瞬のアニメーションでもタップした感じを出すことができます。

簡単に「タップした感」を出してみました。特に重いサイトになるとタップしても遷移自体が遅くなるので自身がタップしたかどうかの判断がつきません（連打したり）。

ユーザーが直感的に操作できるように迷わせない一工夫はしないといけないですね。