リンクのちょっとおしゃれなホバーエフェクトの作り方

どうもこんにちは。
Web/App/UIデザイナーのサトウです。

今回は、リンクのちょっとおしゃれなホバーエフェクトの作り方をご紹介します。

すべてHTMLとCSSだけで実装できるもので、JavaScriptや画像は不要です。

今回紹介するすべてのケースでは共通して、<a>に擬似要素::beforeを用意し、その::beforeに対してサイズや座標の変更を指定することでホバーエフェクトを実現しています。

左から伸びてくる下線

リンクにマウスポインタを乗せると、下線が左から右へピューっと伸びてきます。

See the Pen
link hover effect 01 by foolishlife (@foolishlife)
on CodePen.

::beforeのwidthをデフォルトでは0にしておき、hoverで100％にしています。
また、一瞬で切り替わらないよう、::beforeに対してtransitionで秒数を設定しています。

 

四辺から現れる枠線

リンクにマウスポインタを乗せると、四辺から枠線がヒュッと現れます。

See the Pen
Untitled by foolishlife (@foolishlife)
on CodePen.

::beforeをwidth:100%、height:100%、border-width:0で中央配置しておき、hoverでborder-widthを変更することで実現しています。

borderは::beforeの外側に表示されるため、このままだと枠線は見えません。
これを解決するため、hover時に::beforeのwidthとheightをborder-widthの2倍分ずつ縮小し、borderの表示領域を確保しています。

–border-w、–offsetのカスタムプロパティを使っているのは、border-widthを変更した際にオフセット分をいちいち書き換えるのが面倒かなと思ったからです。
カスタムプロパティを使わず直接数値を指定してももちろん大丈夫です。

左から伸びてくる背景 ver.1

リンクにマウスポインタを乗せると、背景（塗り）が左から右へピューっと伸びてきます。

See the Pen
link hover effect 02 by foolishlife (@foolishlife)
on CodePen.

やっていることは先ほどの下線とほぼ同じです。
違うのは、::beforeのheightを100%にして線から背景にしたことと、::beforeを背景にしたことでリンクの文字が隠れてしまうのを防ぐため、<a>の中に<span>を入れ子にしたことです。

左から伸びてくる背景 ver.2

ver.1と同様、リンクにマウスポインタを乗せると背景（塗り）が左から右へピューっと伸びてきます。
が、今回の背景はただの長方形ではなく、矢印を思わせるような台形としました。

See the Pen
link hover effect 03 by foolishlife (@foolishlife)
on CodePen.

背景となる台形は、clip-pathプロパティを使用して描画しています。

また、今回は背景が台形ということもあり、デフォルトからhoverの状態変化をwidthの変更で対応できないため、サイズは変更せず、transform:translateでx座標を変更することで対応しています。

加えて、細かい点ではありますが、台形の背景が伸び切った際、<a>のpaddingが左右同じだとバランスが悪く見えるため、左を1em、右を2emにしています。

中央から広がる矩形

リンクにマウスポインタを乗せると背景（塗り）が中央から上下に広がってリンクエリアを塗りつぶします。

See the Pen
Untitled by foolishlife (@foolishlife)
on CodePen.

::beforeをwidth:100%、height:0で中央配置しておき、hoverでheightを100%に変更することで実現しています。

中央から広がる円

リンクにマウスポインタを乗せると円形の背景（塗り）が中央から広がってリンクエリアを塗りつぶします。

See the Pen
link hover effect 04 by foolishlife (@foolishlife)
on CodePen.

円をclip-pathプロパティで描画しようとしたのですが、どうやらSafariでは<span>と干渉してしまい挙動が安定しなかったため、border-radiusを使って円を作成しています。

::beforeのwidthを100％に指定し、heightはautoでaspect-ratioを1/1に指定、border-radiusを50%とすることで正円を形成しています。

下から湧き上がる波

リンクにマウスポインタを乗せると波型の背景（塗り）が下から湧き上がってきます。

See the Pen
link hover effect 05 by foolishlife (@foolishlife)
on CodePen.

波型の背景はSVGのパスでマスク処理することにより実現しています。
この背景を、左下から右上に移動させることで波の動きを表現しています。

こういったちょっとした効果がアクセントとなり、ユーザー体験を向上させることもあるかもしれません。
状況に合わせて検討してみるのも良いと思います。

さて、今回は、リンクのちょっとおしゃれなホバーエフェクトの作り方について書いてみました。
いかがだったでしょうか？
読んでくださったあなたの参考に少しでもなれば嬉しいです。
それではまた次回。