テキストリンクのhover時につかえるアンダーラインアニメーションを実装するCSS

FRONTEND

2019.04.7

テキストリンクのhover時につかえるアンダーラインアニメーションを実装するCSS

今回はテキストリンク等にカーソルを当てたときのアンダーラインアニメーションのCSSを紹介します。フォントの色が変わるだけでも、ユーザーはそれがリンクになっているという認識は十分出来ますが、少し手を加えたリンクも試してみてはいかがでしょうか?

hover時のアンダーラインアニメーションCSS

上から下へフェードイン

上から下へアンダーラインがフェードインしてくるパターン。

See the Pen
pBbaGJ
by keitasakurai (@mdesignyokohama)
on CodePen.

下から上へフェードイン

今度は逆に下から上へフェードイン。

See the Pen
PgzQVX
by keitasakurai (@mdesignyokohama)
on CodePen.

左から右へ伸びるライン

hoverすると左から右へアンダーラインが引かれます。カーソルを離すと左へ戻っていきます。

See the Pen
zXBRbZ
by keitasakurai (@mdesignyokohama)
on CodePen.

右から左へ伸びるライン

逆に、右から左へ下線が引っ張られるパターンです。

See the Pen
RORQdY
by keitasakurai (@mdesignyokohama)
on CodePen.

左から右へ線が引かれてそのまま右へ

上のパターンと似ていますが、違うのはhoverを外した後。hover時には左から右へ引っ張られた線が、カーソルを外すとそのまま右へ消えていきます。

See the Pen
BEzXYZ
by keitasakurai (@mdesignyokohama)
on CodePen.

右から左へ線が引かれてそのまま左へ

さっきのやつと逆パターンです。

See the Pen
MReNQq
by keitasakurai (@mdesignyokohama)
on CodePen.

中央から左右へ伸びるアンダーライン

最後はテキストの中央から左右に線が伸びるパターンです。

See the Pen
zXBgRb
by keitasakurai (@mdesignyokohama)
on CodePen.