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

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


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

下に伸びる線

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”VbORaR” default_tab=”css,result” user=”choko”]See the Pen テキストリンクのhoverのエフェクト(下に伸びる線) by choko (@choko) on CodePen.[/codepen_embed]



上に伸びる線

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”OmYqxN” default_tab=”css,result” user=”choko”]See the Pen テキストリンクのhoverのエフェクト(上に伸びる線) by choko (@choko) on CodePen.[/codepen_embed]

中央からラインが伸びる

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”VbORaR” default_tab=”css,result” user=”choko”]See the Pen テキストリンクのhoverのエフェクト(中央からラインが伸びる) by choko (@choko) on CodePen.[/codepen_embed]

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

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”rmgRdr” default_tab=”css,result” user=”choko”]See the Pen テキストリンクのhoverのエフェクト(左右からラインが伸びる-上下) by choko (@choko) on CodePen.[/codepen_embed]

左から背景が表示

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”bWyXYM” default_tab=”css,result” user=”choko”]See the Pen テキストリンクのhoverのエフェクト(左から背景) by choko (@choko) on CodePen.[/codepen_embed]

下から背景

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”dWExdO” default_tab=”css,result” user=”choko”]See the Pen テキストリンクのhoverのエフェクト(下から背景) by choko (@choko) on CodePen.[/codepen_embed]

くるっと表示

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”dWExmO” default_tab=”css,result” user=”choko”]See the Pen テキストリンクのhoverのエフェクト(くるっと表示) by choko (@choko) on CodePen.[/codepen_embed]

くるっと太字

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”NjVQzL” default_tab=”css,result” user=”choko”]See the Pen テキストリンクのhoverのエフェクト(くるっと太字) by choko (@choko) on CodePen.[/codepen_embed]

ボーダーが重なる

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”mmYNGB” default_tab=”css,result” user=”choko”]See the Pen テキストリンクのhoverのエフェクト(ボーダーが重なる) by choko (@choko) on CodePen.[/codepen_embed]

テキストがスルッと

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”OmYKBZ” default_tab=”css,result” user=”choko”]See the Pen テキストリンクのhoverのエフェクト(テキストがスルッと) by choko (@choko) on CodePen.[/codepen_embed]



まとめ

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

コーディングにおすすめの本をご紹介