【CSS】CSS3を利用したHOVER時のエフェクト(テキストリンク)

【CSS】CSS3を利用したHOVER時のエフェクト(テキストリンク)

リンクをホバーした時の処理を頼まれることが多くなってきました。
毎回、過去作ったものや他のサイトから引っ張ってきていたので、ソースを書き換えたりして一手間加えていたのですが、コンポーネント化したやつをまとめちゃえばいいやん!ッと思って、汎用性のあるテキストリンクのホバーした時のエフェクトをまとめました。


関連記事:HOVER時のエフェクトーボタン編

下に伸びる線

See the Pen テキストリンクのhoverのエフェクト(下に伸びる線) by choko (@choko) on CodePen.0



上に伸びる線

See the Pen テキストリンクのhoverのエフェクト(上に伸びる線) by choko (@choko) on CodePen.0

中央からラインが伸びる

See the Pen テキストリンクのhoverのエフェクト(中央からラインが伸びる) by choko (@choko) on CodePen.0

左右からラインが伸びる(上下)

See the Pen テキストリンクのhoverのエフェクト(左右からラインが伸びる-上下) by choko (@choko) on CodePen.0

左から背景が表示

See the Pen テキストリンクのhoverのエフェクト(左から背景) by choko (@choko) on CodePen.0

下から背景

See the Pen テキストリンクのhoverのエフェクト(下から背景) by choko (@choko) on CodePen.0

くるっと表示

See the Pen テキストリンクのhoverのエフェクト(くるっと表示) by choko (@choko) on CodePen.0

くるっと太字

See the Pen テキストリンクのhoverのエフェクト(くるっと太字) by choko (@choko) on CodePen.0

ボーダーが重なる

See the Pen テキストリンクのhoverのエフェクト(ボーダーが重なる) by choko (@choko) on CodePen.0

テキストがスルッと

See the Pen テキストリンクのhoverのエフェクト(テキストがスルッと) by choko (@choko) on CodePen.0



まとめ

サイトにちょっとした演出を加える時に利用してください。
css3だと、テキストリンクの他にもボタンの演出もできるので
HOVER時のエフェクトーボタン編も参考にしてみてください。