最新のマウスオーバー効果おすすめ10選
マウスオーバー時のエフェクト効果を10個紹介しています。
基本的にはリンク線や効果を背景色・グラデーションで形成しているものがほとんどです。
マウスオーバー時にその表示位置や大きさを移動させる仕組みが中心となります。
最新のマウスオーバー効果おすすめ10選
皆さんWEBサイトのリンクエフェクトにはこだわっていますか？
スマホ閲覧が多くなった今、マウスオーバー効果（リンクオーバー効果）はなかなか重要視されない傾向にありますね。
本記事ではなかなか手の込んだCSSによるマウスオーバー（a:hover）エフェクトを10個ご紹介します。
1．背景色スライド効果1
まずは背景色が横からスライドしてくるパターンです。エフェクト効果としてはオーソドックスな部類になりますね。
後からもう一つ似た様なエフェクトを紹介しますが、前者はマウスを離した時にスライドが開始位置（左）へ戻ります。
それに対し後者のエフェクトは、スライドが右へ通り過ぎていきます。
構成ソース
HTML
<p><a href="#">リンクテキスト</a></p>
CSS
a { box-shadow: inset 0 #1abc9c; transition: color .5s ease-in-out, box-shadow .5s ease-in-out; } a:hover { box-shadow: inset 200px 0 0 0 #1abc9c; color: #fff; }
動作サンプル
左から右へ背景が流れ、マウスを離すと右から左へ戻っていくタイプです。
文字は白になっています。
CSS解説
この効果は背景色の効果としてボックスシャドウを利用しています。
マウスオーバーと同時に、ボックスシャドウを左から右（200px）へ一杯に広げる感じです。
ボックスシャドウとメリハリが付くよう、リンクテキストは違う色に変更しましょう。
2．背景色スライド効果2
これは1番で紹介したパターンとほぼ同じですが、背景色の戻りアクションが前者とは違います。
左から右へ流れてきた背景が、そのまま右へ消え去っていきます。
構成ソース
HTML
<p><a href="#">リンクテキスト</a></p>
CSS
a { background: linear-gradient(0deg, #117864, #1abc9c) no-repeat right bottom / 0 var(--type); transition: background-size 350ms; --type: 100%; } a:where(:hover, :focus-visible) { background-size: 100% var(--type); background-position-x: left; } a:hover{ color: #fff; }
動作サンプル
背景グラデーションが、電車の様に通過していくのがわかります。
CSS解説
本CSSの特徴は、背景グラデーションの値を代数「var」で--typeに代入している点です。
--typeの値をプロパティとして利用したり、別の位置に引き継いだりする事ができます。
もう一つは「a:where」で、:hoverと:focus-visibleの両方を指定している表記が特徴です。
3．テキスト交換効果
次はかなり凝ったエフェクトになります。
元のテキストが消えて、新しいテキストが交差して流れていく様に演出されています。
CSSもそれなりに長くなっている事がわかります。
構成ソース
HTML
<p>リンク <a href="#" data-replace="テキスト"><span>テキスト</span></a></p>
aタグにdata-replace属性でテキストが入っています。
ここがマウスオーバー時に表示され、span内にある元テキストが消えていく仕組みです。
CSS
a { overflow: hidden; position: relative; display: inline-block; text-decoration: none; color: #18272F; font-weight: bold; vertical-align: top; } a span { display: inline-block; transition: transform .3s; } a::before, a::after { content: ''; position: absolute; width: 100%; left: 0; } a::before { background-color: #1abc9c; height: 2px; bottom: 0; transform-origin: 100% 50%; transform: scaleX(0); transition: transform .3s; } a::after { content: attr(data-replace); height: 100%; top: 0; transform-origin: 100% 50%; transform: translate3d(100%, 0, 0); transition: transform .3s; color: #1abc9c; } a:hover::before { transform-origin: 0% 50%; transform: scaleX(1); } a:hover::after { transform: translate3d(0, 0, 0); } a:hover span { transform: translate3d(-200%, 0, 0); }
動作サンプル
リンク テキスト
テキストの進行方向に対し下線の流れを逆にしている点が、抜群の視覚効果を生み出しています。
CSS解説
これはリンクテキストをマウスオーバー時に他のテキストと交換する仕組みです。
新しいテキストがスライドしてくると同時に、元のテキストがスライドアウトしていきます。
before疑似要素でマウスオーバー時の下線を表現しています。
流れ込むテキストはdata-属性
ポイントは「データ属性」を使用している点です。
入り込んでくるテキストを「data-replace」で定義し、:after疑似要素のcontentプロパティでそれを呼び出します。
この:after疑似要素に入ったdata-replaceの値は、マウスを載せる前は消えている必要がありますよね。
それをtransform: translate3d(100%, 0, 0);で実現しています。
横方向に100％移動した状態にすれば、マウスオーバー前は隠れて見えなくなります。
マウスオーバーした時
beforeの下線：transform-originの「100% 50%」を「0% 50%」に
spanテキスト：translate3dで「-200%」に移動
afterのデータ属性：translate3dの「100％」を「0％」に
これにより、各要素が指定位置に移動していきます。
4．左右からのカラー移動効果
次は背景色を文字の形に切り取って、スライドさせた効果です。
これにより文字自体の色がスライドで変化するように見えます。
下線の変化方向は、先ほど同様に文字色の変化方向とは逆にしてあります。
構成ソース
HTML
<p><a href="#">リンクテキスト</a></p>
CSS
a { background-image: linear-gradient( to right, #1abc9c, #1abc9c 50%, #000 50% ); background-size: 200% 100%; background-position: -100%; display: inline-block; padding: 0; position: relative; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: all 0.3s ease-in-out; } a:before { content: ''; background: #1abc9c; display: block; position: absolute; bottom: 0px; left: 0; width: 10px; /* 少しだけ見せている下線部分 */ height: 3px; transition: all 0.3s ease-in-out; } a:hover { background-position: 0; } a:hover::before { width:100%; }
動作サンプル
CSS解説
この効果はマウスオーバーすると新しい色が右からスライドし、下線は別の色が逆の左からスライドしてきます。
両方が交差する様な感じですね。
ポイントは色が変化しているのではなく、元々2色のグラデーション間を移動させている点です。
2倍サイズの2色背景を作る
背景をbackground-sizeで元テキストの「2倍の幅」に構成しています。
さらにグラデーションではなく、CSSでちょうど半分ずつを1色で占有した形にします。
これを左端に配置すればその半分だけが見えますので、ちょうど1色だけが見えている状態になります。
マウスオーバー時にbackground-positionで100％分移動させれば、もう1色側が表れるという訳ですね。
背景色をテキストでクリップ
背景色はそのままではなく、background-clipで切り抜きをしている点にも注目です。
これによりテキスト同形状の背景ができ上ります。
背景を文字の上に乗せて移動させるので、文字の色が横から変化するように見える訳です。
サンプルでは下線が伸びる事を予想させる様、最初から10px分見せています。widthを0pxにすると下線は全く見えないところから伸びてきます。
5．下線が虹色に変化する効果
次は下線がレインボーに展開されるギミックです。
マウスを重ねると、アンダーラインが虹色の色彩に変換されていきます。
実際にはアンダーラインは使わず、背景色を虹色にして「下線のサイズおよび位置」に調整しています。
構成ソース
HTML
<p><a href="#">リンクテキスト</a></p>
CSS
a { padding: 5px 0; background: linear-gradient( to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1) ), linear-gradient( to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1) ); background-size: 100% 3px, 0 3px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 400ms; } a:hover { background-size: 0 3px, 100% 3px; }
動作サンプル
CSS解説
まずは1つのbackgroundプロパティで2つの線形グラデーションを連鎖させます。
この背景も前回同様、テキストの2倍の幅に設定されています。
最初の半分は通常の初期色、残り半分は虹色グラデーションを演出しています。
かつグラデーション背景をbackground-sizeで3pxの高さに留め、これを下線のように見せます。
背景色移動
マウスオーバーした時にこの3pxの背景色が、100％分だけ移動する様に設定します。
これにより元々設定してあった虹色部分が下線部分に表れてきます。
6．下線を波線でアニメーションさせる効果
次は下線を波打たせるアニメーション効果を付与したギミックです。
背景画像部分にSVG画像を使って、下線を波打つようなアニメーション効果を演出しています。
構成ソース
HTML
<p><a href="#">リンクテキスト</a></p>
CSS
a { background: linear-gradient(to bottom, #1abc9c 0%, #1abc9c 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 3px 3px; color: #000; text-decoration: none; } a:hover { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%231abc9c' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E"); background-position: 0 100%; background-size: auto 6px; background-repeat: repeat-x; text-decoration: none; }
動作サンプル
CSS解説
CSSのbackground-imageに「data:image/svg+xml;」を利用していきます。
下線部分を画像で補うので、text-decorationは無しにしています。
SVGアニメーションがCSS背景画像に使える訳ですから、可能性が無限に広がりますよね。
自在に使いこなすにはSVGの勉強が必要になります。
7．下線が背景色として覆うタイプ
ここでちょっと落ち着いたシンプルな効果も紹介しましょう。
アンダーラインがマウスオーバー時に全体を覆うような演出です。
構成ソース
HTML
<p><a href="#">リンクテキスト</a></p>
CSS
a { background: linear-gradient( to bottom, #1abc9c 0%, #1abc9c 100% ); background-position: 0 100%; background-repeat: repeat-x; background-size: 2px 2px; text-decoration: none; transition: background-size .2s; } a:hover { background-size: 2px 50px; }
動作サンプル
CSS解説
このサンプルもこれまでと同様に、背景色を2px下線に見立てています。
通常時は下線となる様に適切な位置に設置しています。
マウスオーバー時に背景色をテキスト全体を覆う位置に移動させるだけです。
8．中抜き文字になる効果
これまた少し変わったギミックで、マウスオーバー時に文字が中抜き文字になる演出です。
文字が太くないと中抜き状態がわかりにくいので、サンプルはあえて文字を大きめにしてあります。
構成ソース
HTML
<p><a href="#">リンクテキスト</a></p>
CSS
p{ font-size: 24px; font-weight: bold; } a { text-decoration: none; } a:hover { color: transparent; -webkit-text-stroke: 2px #1abc9c; }
動作サンプル
マウスオーバー時に文字が輪郭付きになり、色が白の中抜き文字になっていますね。
CSS解説
CSSではまず「-webkit-text-stroke」で、2pxの輪郭枠を記述しています。
文字の色はtransparentで透明にしていますので、下地の色が投影されて「白」になっています。
-webkit-text-strokeの代替として、text-shadowで輪郭形成する事も可能です。
9．浮き上がりする効果
次は文字が浮き上がる様な変わった演出のサンプルです。
浮き上がると言うよりも、影が伸びてくると言った方が正しいかも知れません。
構成ソース
HTML
<p><a href="#">リンクテキスト</a></p>
CSS
a { text-decoration: none; background-position: 0 100%; background-repeat: repeat-x; background-size: 4px 4px; } a:hover { text-shadow: 0px 0px 0 rgb(208,138,28), 1px 1px 0 rgb(165,123,26), 2px 2px 0 rgb(242,185,100), 3px 3px 0 rgb(227,167,187), 4px 4px 0 rgb(182,129,63), 5px 5px 0 rgb(161,117,50), 6px 6px 0 rgb(144,103,39), 7px 7px 0 rgb(130,91,31), 8px 8px 0 rgb(120,83,25), 9px 9px 0 rgb(108,73,20), 10px 10px 0 rgb(93,63,13), 11px 11px 0 rgb(60,54,12), 12px 12px 0 rgb(63,41,8); }
動作サンプル
CSS解説
構成は非常に単純で、text-shadowを連続（今回は12個）で並べているだけです。
設置ポイントを1pxずつずらし、色を濃くしていく点がポイントです（色の変化に決まりはありません）。
影が伸びている様に色を揃えるのが良いと思います。
10．全然違う文字になる効果
最後はおまけの様なものですが、マウスオーバー時に文字が違う文字に変わるものです。
違和感がなくかつ押してしまいそうな演出調整がされています。
構成ソース
HTML
<p><a href="#">リンクテキスト</a></p>
CSS
a { background: linear-gradient( to bottom, #1abc9c 0%, #1abc9c 100% ); background-position: 0 100%; background-repeat: repeat-x; background-size: 4px 4px; text-decoration: none; } a:hover { background: none; font-family: serif; font-size: 1.2em; letter-spacing: 3px; line-height: .75em; }
動作サンプル
CSS解説
例によって下線は背景色で構成をしています。
文字をserif系にし文字間隔を開けて、テキストをクリックさせるための演出がされているのがわかります。
