2022.3.30｜コーディング
CSSでテキストマウスオーバー時に「ホバーアクション（ホバーエフェクト）」する方法
テキストやテキストリンクは、必ずWebサイトに必要な要素です。従来では、テキストやテキストリンクをマウスオーバーさせたい場合は、アンダーラインなどの方法くらいしかなく設定は限られていました。近年ではHTMLとCSSのみで多彩なアクション要素を持たせることができるようになりました。
テキストやテキストリンクに、「ホバーアクション」「ホバーエフェクト」を設定するには、HTMLとCSSのみで実装することができます。jQueryや画像などを使用せずにアニメーションを行うことが出来ます。
今回は、CSSでテキストマウスオーバー時に「ホバーアクション（ホバーエフェクト）」する方法を解説します。
本記事の内容
- CSSでテキストマウスオーバー時に「ホバーアクション（ホバーエフェクト）」を実装する方法
- 1.アンダーライン（基本スタイル）
- 2.文字色がふんわり変化
- 3.背景色がふんわり変化
- 4.文字が拡大
- 5.文字が一瞬拡大
- 6.文字が傾く
- 7.文字色がふんわり変化
- 8.文字を回転
- 9.文字にモザイクがかかる
- 10.文字が白抜きシャドウに変化
- 11.文字がレインボー色に変化
- 12.ボックスが回転
- 13.背景色が横からスライド
- 14.背景色が下からスライド
- 15.アンダーラインがふんわり現れる
- 16.アンダーラインが左からスライド
- 17.アンダーラインが上下に現れる
- 18.アンダーラインが中央からスライド
- まとめ
CSSでテキストマウスオーバー時に「ホバーアクション（ホバーエフェクト）」を実装する方法
CSSでテキストに「ホバーアクション（ホバーエフェクト）」を実装する場合は、「hover」や「transition」のプロパティを使用して配置します。 ボタンにマウスを置いたときに「ホバーアクション（ホバーエフェクト）」を実装させるためには、ボタンのCSSに「hover」プロパティを記述します。追加した「hover」プロパティにマウスを置いた後の変化する内容を記述します。
例
HTMLの記述
<div class="sample_link"><a href="#">テキストマウスオーバー</a></div>どちらの記述方法でも問題ありません。
<a href="#" class="sample_link">テキストマウスオーバー</a>1.アンダーライン（基本スタイル）
マウスと置いたときにアンダーラインが表示させるように「hover」要素を使って実装します。
例
cssコード
※HTMLのボタンを「sample_button01」に変更します。
.sample_link01 {}
.sample_link01 a{
display: inline-block;
color:#ee2d7b;
font-size:120%;
text-decoration:none;
}
.sample_link01 a:hover{
color: #25ceff;
text-decoration:underline;
}2.文字色がふんわり変化
マウスと置いたときに文字色がふんわり変化するように「transition」プロパティを使ってアニメーションを実装します。
例
cssコード
※HTMLのボタンを「sample_button02」に変更します。
.sample_link02 {}
.sample_link02 a{
display: inline-block;
color:#ee2d7b;
font-size:120%;
text-decoration:none;
transition: color .3s;
}
.sample_link02 a:hover{
color: #25ceff;
}3.背景色がふんわり変化
マウスと置いたときに文字色がふんわり変化するように「transition」プロパティを使ってアニメーションを実装します。
例
cssコード
※HTMLのボタンを「sample_button03」に変更します。
.sample_link03 {}
.sample_link03 a{
display: inline-block;
color:#ee2d7b;
font-size:120%;
text-decoration:none;
transition: all .3s;
}
.sample_link03 a:hover{
color: #fff;
background-color: #ee2d7b;
}4.文字が拡大
マウスと置いたときに文字が拡大するように「transition」プロパティを使ってアニメーションを実装し、「transform」に「scale」の値を記述して文字の拡大サイズを設定します。
例
cssコード
※HTMLのボタンを「sample_button04」に変更します。
.sample_link04 {}
.sample_link04 a{
display: inline-block;
color:#ee2d7b;
font-size:120%;
text-decoration:none;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
.sample_link04 a:hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}5.文字が一瞬拡大
マウスと置いたときに文字が一瞬拡大するように「transition」プロパティを使ってアニメーションを実装し、「@keyframes」を記述して文字の拡大サイズを設定します。
例
cssコード
※HTMLのボタンを「sample_button05」に変更します。
.sample_link05 {}
.sample_link05 a{
display: inline-block;
color:#ee2d7b;
font-size:120%;
text-decoration:none;
}
.sample_link05 a:hover{
animation: zoom .3s;
}
@keyframes zoom {
50% {
transform: scale(1.05);
}
}6.文字が傾く
マウスと置いたときに文字が傾くように「transition」プロパティを使ってアニメーションを実装し、「transform」に「rotate」の値を記述して文字の傾く距離を設定します。
例
cssコード
※HTMLのボタンを「sample_button06」に変更します。
.sample_link06 {}
.sample_link06 a{
display: inline-block;
color:#ee2d7b;
font-size:120%;
text-decoration:none;
transition: .3s;
}
.sample_link06 a:hover{
transform: rotate(5deg);
}7.文字色がふんわり変化
マウスと置いたときに文字色がふんわり変化するように「transition」プロパティを使ってアニメーションを実装します。
例
cssコード
※HTMLのボタンを「sample_button07」に変更します。
.sample_link07 {}
.sample_link07 a{
display: inline-block;
color:#fff;
font-size:120%;
text-decoration:none;
transition: .3s;
background-color: #ee2d7b;
}
.sample_link07 a:hover{
background-color: #ffde00;
}8.文字を回転
HTMLの記述に「span」要素を記述します。
マウスと置いたときに文字を回転するように「transition」プロパティを使ってアニメーションを実装し、「transform」に「rotateX」の値を記述して文字の回転する角度を設定します。
例
HTMLコード
<div class="sample_link08"><a href=""><span>テキストマウスオーバー</span></a></div>cssコード
※HTMLのボタンを「sample_button08」に変更します。
.sample_link08 {}
.sample_link08 a span{
display: inline-block;
color:#ee2d7b;
font-size:120%;
text-decoration:none;
transition: .5s;
}
.sample_link08 a span:hover{
transform: rotateX(360deg);
}9.文字にモザイクがかかる
マウスと置いたときに文字にモザイクがかかるように「transition」プロパティを使ってアニメーションを実装し、「color」に「transparent」の値を記述して文字にモザイクがかかるように設定します。
例
cssコード
※HTMLのボタンを「sample_button09」に変更します。
.sample_link09 {}
.sample_link09 a{
display: inline-block;
color:#ee2d7b;
font-size:120%;
text-decoration:none;
transition: 0.5s;
}
.sample_link09 a:hover{
color: transparent;
text-shadow: 0 0 5px #ee2d7b;
}10.文字が白抜きシャドウに変化
マウスと置いたときに文字が白抜きシャドーに変化するように「transition」プロパティを使ってアニメーションを実装し、「text-shadow」を記述してテキストシャドウがかかるように設定します。
例
cssコード
※HTMLのボタンを「sample_button10」に変更します。
.sample_link10 {}
.sample_link10 a{
display: inline-block;
color:#ee2d7b;
font-size:120%;
text-decoration:none;
transition: 0.5s;
}
.sample_link10 a:hover{
color: #fff;
text-shadow: -1px 1px 5px #ee2d7b, 1px -1px 5px #ee2d7b;
}11.文字がレインボー色に変化
マウスと置いたときに文字がレインボー色に変化するように「transition」プロパティを使ってアニメーションを実装し、「background-image」プロパティを使ってレインボー色の設定をします。
例
cssコード
※HTMLのボタンを「sample_button11」に変更します。
.sample_link11 {}
.sample_link11 a{
display: inline-block;
color:#ee2d7b;
font-size:120%;
text-decoration:none;
transition: 0.5s;
}
.sample_link11 a:hover{
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -moz-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -o-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
background-image: -ms-linear-gradient(left, #f69, #fc0, #3c3, #09f, #96f);
}12.ボックスが回転
HTMLの記述に「span」要素と「data」要素を記述します。
マウスと置いたときにボックスが回転するように「transform-style」プロパティに「preserve-3d」を使って3Dアニメーションを実装します。
例
HTMLコード
<div class="sample_link12"><a href=""><span data-text="テキストマウスオーバー">テキストマウスオーバー</span></a></div>cssコード
※HTMLのボタンを「sample_button12」に変更します。
.sample_link12 {}
.sample_link12 a{
display: inline-block;
color:#ee2d7b;
font-size:120%;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
vertical-align: bottom;
overflow: hidden;
}
.sample_link12 a span{
display: inline-block;
position: relative;
transition: .4s;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.sample_link12 a:hover span{
background-color: #2ecc71;
-webkit-transform: translate3d(0, 0, -30px) rotateX(90deg);
transform: translate3d(0, 0, -30px) rotateX(90deg);
}
.sample_link12 a span:after{
display: inline-block;
position: absolute;
left: 0;
top: 0;
content: attr(data-text);
color: #fff;
background-color: #2ecc71;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: translate3d(0, 105%, 0) rotateX(-90deg);
transform: translate3d(0, 105%, 0) rotateX(-90deg);
}13.背景色が横からスライド
マウスと置いたときに背景色が横からスライドするように「transition」プロパティを使ってアニメーションを実装し、「background-position」プロパティを使って背景色が横からスライドする位置を設定します。
例
cssコード
※HTMLのボタンを「sample_button13」に変更します。
.sample_link13 {}
.sample_link13 a{
display: inline-block;
color:#ee2d7b;
font-size:120%;
text-decoration:none;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(238, 45, 123, 1) 50%);
background-position: 0 0;
background-size: 200% auto;
transition: .3s;
}
.sample_link13 a:hover{
background-position: -100% 0;
color: #fff;
}14.背景色が下からスライド
マウスと置いたときに背景色が下からスライドするように「transition」プロパティを使ってアニメーションを実装し、「background-position」プロパティを使って背景色が横からスライドする位置を設定します。
例
cssコード
※HTMLのボタンを「sample_button14」に変更します。
.sample_link14 {}
.sample_link14 a{
color:#ee2d7b;
font-size:120%;
text-decoration:none;
background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(238, 45, 123, 1) 50%);
background-position: 0 0;
background-size: auto 200%;
transition: .3s;
}
.sample_link14 a:hover{
background-position: 0 100%;
color: #fff;
}15.アンダーラインがふんわり現れる
マウスと置いたときにアンダーラインがふんわり現れるように「transition」プロパティを使ってアニメーションを実装し、「after」と「hover」の要素を使ってマウスオーバー時の設定をします。
cssコード
※HTMLのボタンを「sample_button15」に変更します。
.sample_link15 {}
.sample_link15 a{
display: inline-block;
color:#ee2d7b;
font-size:120%;
text-decoration:none;
position: relative;
transition: .3s;
}
.sample_link15 a::after{
position: absolute;
bottom: .3em;
left: 0;
content: '';
width: 100%;
height: 1px;
background-color: #ee2d7b;
opacity: 0;
transition: .3s;
}
.sample_link15 a:hover::after{
bottom: 0;
opacity: 1;
}16.アンダーラインが左からスライド
マウスと置いたときにアンダーラインが左からスライドするように「transition」プロパティを使ってアニメーションを実装し、「after」と「hover」の要素を使ってマウスオーバー時の設定をします。
例
cssコード
※HTMLのボタンを「sample_button16」に変更します。
.sample_link16 {}
.sample_link16 a{
display: inline-block;
color:#ee2d7b;
font-size:120%;
text-decoration:none;
position: relative;
transition: .3s;
}
.sample_link16 a::after{
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 0;
height: 1px;
background-color: #ee2d7b;
transition: .3s;
}
.sample_link16 a:hover::after{
width: 100%;
}17.アンダーラインが上下に現れる
マウスと置いたときにアンダーラインが上下に現れるように「transition」プロパティを使ってアニメーションを実装し、「after」と「hover」の要素を使ってマウスオーバー時の設定をします。
例
cssコード
※HTMLのボタンを「sample_button17」に変更します。
.sample_link17 {}
.sample_link17 a{
display: inline-block;
color:#ee2d7b;
font-size:120%;
text-decoration:none;
position: relative;
transition: .3s;
}
.sample_link17 a::before,
.sample_link17 a::after{
position: absolute;
content: '';
width: 0;
height: 1px;
background-color: #ee2d7b;
transition: .3s;
}
.sample_link17 a::before {
top: 0;
left: 0;
}
.sample_link17 a::after {
bottom: 0;
right: 0;
}
.sample_link17 a:hover::before,
.sample_link17 a:hover::after {
width: 100%;
}18.アンダーラインが中央からスライド
マウスと置いたときにアンダーラインが中央からスライドするように「transition」プロパティを使ってアニメーションを実装し、「after」と「hover」の要素を使ってマウスオーバー時の設定をします。
例
cssコード
※HTMLのボタンを「sample_button18」に変更します。
.sample_link18 {}
.sample_link18 a{
display: inline-block;
color:#ee2d7b;
font-size:120%;
text-decoration:none;
position: relative;
transition: .3s;
}
.sample_link18 a::after{
position: absolute;
bottom: 0;
left: 50%;
content: '';
width: 0;
height: 1px;
background-color: #ee2d7b;
transition: .3s;
transform: translateX(-50%);
}
.sample_link18 a:hover::after{
width: 100%;
}まとめ
CSSでボタンなどにエフェクトやアニメーションを設定する方法が沢山あります。
Javascriptを利用せずにアニメーションが沢山出来るようになったのでCSSの幅が広がりますね。
文字だけでなくボタンや画像・写真にもアニメーションは活用できるので色々な方法を知っておくと良いと思います。
