テキストリンクの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.
