見たい時にすぐ動きの確認ができるものが欲しくて一覧化したのでシェアします。いずれも文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛く、利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。
先述したように紹介しているサンプルの中には利用できる場面が限られてしまうものもあり、主にdisplay: inline-block;を記述しているタイプのものが意図しない箇所で改行されたり、逆にされなかったりということがあるので注意して下さい。
実際にどのような動きになってしまうのかはブラウザを縮めて確認してもらったり、または自身で環境を用意して実装・確認をしてもらうとよりわかりやすいと思います。
※ブラウザによって動きや見栄えが説明と異なる場合があります。
閲覧の際にChromeやFirefoxなどで見てもらえるとほぼ問題なく動きの確認ができると思います。
※文章内で「単純なa要素」と記載しているのは、<a href="#">リンク</a>のようなものを指します。
※デモで使用しているa要素に対してはデフォルトスタイルとして、通常のcolor指定とtext-decoration: none;を指定してあります。
また、各サンプルソースの記述はプレフィックスなしの状態となっているので、必要であれば追記してください。
テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 目次
1. 文字色がふわっと変化
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
よくあるホバー時にテキストカラーが変化する動きにtransitionを使ってふわっと変化させるようにしたものです。
実装する際のHTMLに関しては単純なa要素のみを使用し、CSSは以下のように記述します。
CSS
a {
transition: color .3s;
}2. 文字色＋背景色がふわっと変化
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
先ほどのテキストカラーが変化する動きに加え、背景色も変化するようにし、同じくtransitionを使ってそれらがふわっと変化させるようにしたものです。
実装する際のHTMLに関しては単純なa要素のみを使用し、CSSは以下のように記述します。
CSS
a {
padding: 0 .3em;
transition: all .3s;
}
a:hover {
color: #fff;
background-color: #2ecc71;
}3. 文字が拡大
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
ホバー時に文字が少し拡大するようにしたものです。
実装する際のHTMLに関しては単純なa要素のみを使用し、CSSは以下のように記述します。
CSS
a {
display: inline-block;
transition: .3s;
transform: scale(1);
}
a:hover {
transform: scale(1.1);
}4. 文字が一瞬拡大
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
先ほどはホバーしている間ずっと拡大しているものですが、それを一瞬だけ拡大するようにしたものです。
実装する際のHTMLに関しては単純なa要素のみを使用し、CSSは以下のように記述します。
CSS
a {
display: inline-block;
}
a:hover {
animation: zoom .3s;
}
@keyframes zoom {
50% {
transform: scale(1.05);
}
}5. 文字が傾く
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
ホバー時に文字が傾くようにしたものです。
実装する際のHTMLに関しては単純なa要素のみを使用し、CSSは以下のように記述します。
CSS
a {
display: inline-block;
transition: .3s;
}
a:hover {
transform: rotate(5deg);
}6. 文字が縦回転
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
ホバー時にテキストが縦方向にクルクルと回転するようにしたものです。
実装する際のHTMLとCSSは以下のように記述します。
HTML
<a href="#"><span>リンク</span></a>CSS
a,
a span {
display: inline-block;
}
a span {
transition: .5s;
}
a:hover span {
transform: rotateX(360deg);
}7. 3D
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
ホバー時の動きにボックスが回転しているような3D表現を用いたものです。
実装する際のHTMLとCSSは以下のように記述し、span要素に記述してあるように赤文字部分のようにdata属性を利用します。
HTML
<a href="#"><span data-text="リンク">リンク</span></a>CSS
.post-contents .sample07 p a {
display: inline-block;
perspective: 1000px;
perspective-origin: 50% 50%;
vertical-align: bottom;
overflow: hidden;
}
.post-contents .sample07 p a span {
display: inline-block;
position: relative;
padding: 0 .3em;
transition: .4s;
transform-origin: 50% 0%;
transform-style: preserve-3d;
}
.post-contents .sample07 p a span:after {
display: inline-block;
position: absolute;
left: 0;
top: 0;
content: attr(data-text);
padding: 0 .3em;
color: #fff;
background-color: #2ecc71;
transform-origin: 50% 0%;
transform: translate3d(0, 105%, 0) rotateX(-90deg);
}
.post-contents .sample07 p a:hover span {
background-color: #2ecc71;
transform: translate3d(0, 0, -30px) rotateX(90deg);
}8. 背景色を左からスライド表示
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
ホバー時に背景色が左からスライドされていくような見た目にしたものです。
実装する際のHTMLに関しては単純なa要素のみを使用し、CSSは以下のように記述します。
CSS
a {
padding: 0 .3em;
background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(46,204,113,1) 50%);
background-position: 0 0;
background-size: 200% auto;
transition: .3s;
}
a:hover {
background-position: -100% 0;
color: #fff;
}ちなみにここで紹介しているデモやソースは左からのものですが、ホバー時のスタイルで記述しているbackground-position: -100% 0;の箇所をbackground-position: 100% 0;に変更すれば右からスライドする形に変更できます。
9. 背景色を下からスライド表示
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
こちらは先ほどの背景色がスライドしてくるのを下から表示されるようにしたものです。
実装する際のHTMLに関しては単純なa要素のみを使用し、CSSは以下のように記述します。
CSS
a {
padding: 0 .3em;
background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(46,204,113,1) 50%);
background-position: 0 0;
background-size: auto 200%;
transition: .3s;
}
a:hover {
background-position: 0 100%;
color: #fff;
}10. 一文字ずつ回転
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
こちらは正直使い勝手も悪く、もっとスマートに実装する方法がありそうですが一応…。
ホバー時に文字が一文字ずつ回転するエフェクトを実装したものです。
実際の記述ですが、まずHTMLは下記のように一文字ずつspan要素で括ります。
HTML
<a href="#"><span>リ</span><span>ン</span><span>ク</span></a>上記サンプルソースでは3文字だけなのでまだ楽ですが、これが10文字、20文字となってくるとさすがにいちいちspanで括っていくのは面倒なので、もし実際に使うとなった場合はjQueryなどJavaScriptを使用して一文字ずつspanで括るように指定するのが手っ取り早くて良いと思います。
CSSは以下のように記述し、ホバー時にtransform: rotateY(360deg);で回転するようにしているのですが、その開始時間をtransition-delayで少しずつずらしていくことで、一文字ずつパラパラと回転しているような見せ方ができます。
サンプルソースでは5文字分までしか記述していませんが、もっと文字数がある場合は増やしていく必要があります。
CSS
a {
transition: .3s;
}
a span {
display: inline-block;
}
a:hover span {
transform: rotateY(360deg);
transition: .6s;
}
a:hover span:nth-of-type(1) { transition-delay: .02s; }
a:hover span:nth-of-type(2) { transition-delay: .04s; }
a:hover span:nth-of-type(3) { transition-delay: .06s; }
a:hover span:nth-of-type(4) { transition-delay: .08s; }
a:hover span:nth-of-type(5) { transition-delay: .10s; }
・
・
・
11. アンダーラインがフェードイン
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
擬似要素を利用してアンダーラインとなる要素を作成・非表示にしておき、ホバー時にそれをフェードインさせるというものです。
実装する際のHTMLに関しては単純なa要素のみを使用し、CSSは以下のように記述します。
CSS
a {
position: relative;
display: inline-block;
transition: .3s;
}
a::after {
position: absolute;
bottom: .3em;
left: 0;
content: '';
width: 100%;
height: 1px;
background-color: #2ecc71;
opacity: 0;
transition: .3s;
}
a:hover::after {
bottom: 0;
opacity: 1;
}12. 左からラインが伸びる（下）
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
同じく擬似要素を利用してアンダーラインとなる要素を作成してホバー時にそれをアニメーションさせたもので、ホバー時に左からラインが伸びてくるようにしたものです。
実装する際のHTMLに関しては単純なa要素のみを使用し、CSSは以下のように記述します。
CSS
a {
position: relative;
display: inline-block;
transition: .3s;
}
a::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 0;
height: 1px;
background-color: #2ecc71;
transition: .3s;
}
a:hover::after {
width: 100%;
}13. 左右からラインが伸びる（上下）
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
こちらはラインを下だけでなく上にも配置したもので、さらに上は左から、下は右からそれぞれ伸びるようにしたものです。
実装する際のHTMLに関しては単純なa要素のみを使用し、CSSは以下のように記述します。
CSS
a {
position: relative;
display: inline-block;
transition: .3s;
}
a::before,
a::after {
position: absolute;
content: '';
width: 0;
height: 1px;
background-color: #2ecc71;
transition: .3s;
}
a::before {
top: 0;
left: 0;
}
a::after {
bottom: 0;
right: 0;
}
a:hover::before,
a:hover::after {
width: 100%;
}14. 中央からラインが伸びる（下）
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
同じく擬似要素を利用してアンダーラインとなる要素を作成したもので、ホバー時に中央から左右へとラインが伸びてくるようにしたものです。
実装する際のHTMLに関しては単純なa要素のみを使用し、CSSは以下のように記述します。
CSS
a {
position: relative;
display: inline-block;
transition: .3s;
}
a::after {
position: absolute;
bottom: 0;
left: 50%;
content: '';
width: 0;
height: 1px;
background-color: #2ecc71;
transition: .3s;
transform: translateX(-50%);
}
a:hover::after {
width: 100%;
}15. 中央からラインが伸びる（上下）
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
こちらはラインを下だけでなく上にも配置したものです。
実装する際のHTMLに関しては単純なa要素のみを使用し、CSSは以下のように記述します。
CSS
a {
position: relative;
display: inline-block;
transition: .3s;
}
a::before,
a::after {
position: absolute;
left: 50%;
content: '';
width: 0;
height: 1px;
background-color: #2ecc71;
transition: .3s;
transform: translateX(-50%);
}
a::before {
top: 0;
}
a::after {
bottom: 0;
}
a:hover::before,
a:hover::after {
width: 100%;
}以上、テキストリンクのホバー時に使えるエフェクト・デザインサンプルでした。
下記も同じようにテキストリンクで利用できそうなホバーエフェクトがまとめらているエントリーやサンプルになり、今回紹介している以外の動きもまとめられています。
また、一部エフェクトの実装方法を参考にもさせてもらいました。