【CSS】CSSだけで実装できるシンプルなホバーエフェクト集
株式会社トミックス
もう過去に先人の方々が幾度となくまとめてきた内容だと思いますが、中にはスタイリッシュすぎて逆に使いどころに困ったり、シンプルだけどあまりピンとくるものじゃなかったりすることも多いので、個人的によく使うものをまとめてみました。
反転
昔からある伝統的なエフェクトですね。まずエフェクト付けるとなったら取りあえずこれ付けて様子見してます。
<a class="mousehover_1">マウスホバー</a>
a.mousehover_1 {
color: #333;
font-size: 16px;
display: inline-block;
padding: .8em 2em;
border: #333 solid 1px;
transition: all .2s;
}
a.mousehover_1:hover {
color: #fff;
background-color: #333;
}
背景がスライドイン
左から背景がにゅっと伸びてくるようなエフェクトです。ちょっとスタイリッシュさが増します。どちらかといえばカジュアル向けかもしれません。
<a class="mousehover_2"><span>マウスホバー</span></a>
a.mousehover_2 {
color: #333;
font-size: 16px;
display: inline-block;
padding: .8em 2em;
position: relative;
border: #333 solid 1px;
transition: all .2s;
}
a.mousehover_2 > span {
position: relative;
}
a.mousehover_2::before {
content: "";
display: block;
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #333;
transition: all .3s;
}
a.mousehover_2:hover {
color: #fff;
}
a.mousehover_2:hover::before {
width: 100%;
}
下線が伸びる：その１
左から下線が伸びて出てくるパターンです。主にヘッダーメニューなどで見かける気がします。
<a class="mousehover_3">マウスホバー</a>
a.mousehover_3 {
color: #333;
font-size: 16px;
display: inline-block;
padding: .8em 2em;
position: relative;
transition: all .2s;
}
a.mousehover_3::before {
content: "";
display: block;
width: 0;
height: 3px;
position: absolute;
left: 0;
bottom: 0;
background-color: #333;
transition: all .3s;
}
a.mousehover_3:hover::before {
width: 100%;
}
下線が伸びる：その２
その１の中心から伸びるパターンです。これもヘッダーメニューなどでたまに見かけますね。
<a class="mousehover_4">マウスホバー</a>
a.mousehover_4 {
color: #333;
font-size: 16px;
display: inline-block;
padding: .8em 2em;
position: relative;
transition: all .2s;
}
a.mousehover_4::before {
content: "";
display: block;
width: 0;
height: 3px;
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: #333;
transition: all .3s;
}
a.mousehover_4:hover::before {
width: 100%;
}
株式会社トミックス