リンクをホバーした時の処理を頼まれることが多くなってきました。
毎回、過去作ったものや他のサイトから引っ張ってきていたので、ソースを書き換えたりして一手間加えていたのですが、コンポーネント化したやつをまとめちゃえばいいやん！ッと思って、汎用性のあるテキストリンクのホバーした時のエフェクトをまとめました。
関連記事：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時のエフェクトーボタン編も参考にしてみてください。
