もう迷わない！テキストリンクのエフェクトまとめ10

こんにちは、後藤です。

サイトデザインの要素として大事な１つとしてテキストリンクがあると思います。
みなさんはコーディングする時、テキストリンクのスタイルはどうしていますか？
結局、アンダーラインを指定していつもと一緒…って思ったことはありませんか？

実際、僕はあります。
コーディングしてるとワンパターンになりがちなんですよね。
試行錯誤していろいろ試したりはするんですけど、
いざ肝心なときに思い出せなかったり、凝ったことしようすると意外と面倒だったりするんです。

そこで、本日はそんないざって時に備えて、
『テキストリンクのエフェクトいろいろ』をご紹介します。

はじめに

一般的なリンクスタイル。認知度も高くて一目でリンクだと判別できる。

[html] <a class="link01" href="#">テキストリンク</a>; [/html] [css] .link01 { color: #4E86BF; text-decoration: underline; } .link01:hover { color: #314559; } [/css]

ボーダーを使用したエフェクト

シンプルなボーダーを使用したスタイルです。transitionを組み合わせていろいろアレンジが可能です。

[html] <a class="link02" href="#">テキストリンク</a>; [/html] [css] .btn_area .link02 { color: #4E86BF; text-decoration: none; display: inline-block; position: relative; } .btn_area .link02::after { content: ""; width: 0%; height: 1px; display: block; background-color: #4E86BF; transition: all .25s linear; position: absolute; bottom: 0; left: 0; } .btn_area .link02:hover::after { width: 100%; } [/css]

---

[html] <a class="link03" href="#">テキストリンク</a>; [/html] [css] .link03 { color: #4E86BF; text-decoration: none; display: inline-block; position: relative; } .link03::after { content: ""; width: 0%; height: 1px; background-color: #4E86BF; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: all .25s linear; } .link03:hover::after { width: 100%; } [/css]

---

[html] <a class="link04" href="#">テキストリンク</a>; [/html] [css] .link04 { color: #4E86BF; text-decoration: none; display: inline-block; position: relative; } .link04::before, .link04::after { content: ""; width: 0%; height: 1px; display: block; background-color: #4E86BF; transform: translateX(-50%); transition: all .25s linear; position: absolute; } .link04::before { top: 0; left: 50%; } .link04::after { bottom: 0; left: 50%; } .link04:hover::before, .link04:hover::after { width: 100%; } [/css]

---

[html] <a class="link05" href="#">テキストリンク</a>; [/html] [css] .link05 { color: #4E86BF; text-decoration: none; display: inline-block; position: relative; } .link05::before, .link05::after { content: ""; width: 100%; height: 1px; background-color: #4E86BF; display: block; opacity: 0; transform: translate(-50%, -50%); transition: all .25s linear; position: absolute; } .link05::before { top: 50%; left: 50%; } .link05::after { bottom: 50%; left: 50%; } .link05:hover::before{ opacity: 1; top:0; } .link05:hover::after { opacity: 1; bottom:0; } [/css]

背景色を使用したエフェクト

背景色を使うと変化が大きくなるので、よりメリハリのあるリンクになります。

[html] <a class="link06" href="#">テキストリンク</a>; [/html] [css] .link06 { text-decoration: none; transition: all .25s linear; } .link06:hover { color: #FFF; background-color: #4E86BF; } [/css]

---

このエフェクトを使用する場合、spanでテキストを囲んでください。

[html] <a class="link07" href="#"><span>テキストリンク</span></a> [/html] [css] .link07 { display: inline-block; position: relative; transition: all .25s linear; text-decoration: none; } .link07 span { position: relative; z-index: 2; } .link07:before { content: ""; width: 0%; height: 100%; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: #4E86BF; z-index: 1; transition: all .25s linear; } .link07:hover { color: #FFF; } .link07:hover:before { width: 100%; } [/css]

---

下から背景色が変化するパターン。このエフェクトを使用する場合、spanでテキストを囲んでください。

[html] <a class="link08" href="#"><span>テキストリンク</span></a> [/html] [css] .link08 { display: inline-block; position: relative; transition: all .25s linear; text-decoration: none; } .link08 span { position: relative; z-index: 2; } .link08:before { content: ""; width: 0%; height: 100%; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: #4E86BF; z-index: 1; transition: all .25s linear; } .link08:hover { color: #FFF; } .link08:hover:before { width: 100%; } [/css]

---

このエフェクトは、span要素で記述し、data属性を利用しています。
hoverするとdata属性に記述した内容が表示されます。

[html] <a class="link09" href="#"><span data-text="テキストリンク">テキストリンク</span></a> [/html] [css] .link09 { display: inline-block; -webkit-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; overflow: hidden; } .link09 span { display: inline-block; position: relative; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: all .25s linear; } .link09 span:after { content: attr(data-text); display: inline-block; background-color: #4E86BF; color: #fff; vertical-align: bottom; position: absolute; left: 0; top: 0; padding-top: 2px; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: translate3d(0, 105%, 0) rotateX(-90deg); transform: translate3d(0, 105%, 0) rotateX(-90deg); } .link09:hover span { background-color: #4E86BF; -webkit-transform: translate3d(0, 0, -30px) rotateX(90deg); transform: translate3d(0, 0, -30px) rotateX(90deg); } [/css]

文字の変化を利用したエフェクト

最後に文字を一瞬拡大させる、CSSアニメーションを使ったエフェクト。 派手さはないけど、ちょっと変わった見せ方がしたい時にいいかも。 簡単なaタグだけでできるので比較的簡単です。 [html] <a class="link10" href="#">テキストリンク</a> [/html] [css] .link10 { display: inline-block; text-decoration: none; } .link10:hover { -webkit-animation: zoom 0.3s; animation: zoom 0.3s; } @-webkit-keyframes zoom { 50% { -webkit-transform: scale(1.05); } } @keyframes zoom { 50% { transform: scale(1.05); } } [/css]

さいごに

いかがだったでしょうか。 今回ご紹介したエフェクト以外に、アレンジ次第でもっとパターンが増えると思います。 海外のサイトや他のブログにも、沢山のTipsが紹介されいますし、皆さん参考してはいかがでしょうか。 また、今回の記事を作成するにあたり一部エフェクトを参考させてもらいました。 Navigation Animation – CodePen