【CSS】CSSだけで実装できるシンプルなホバーエフェクト集

TOMIX編集部

株式会社トミックス

もう過去に先人の方々が幾度となくまとめてきた内容だと思いますが、中にはスタイリッシュすぎて逆に使いどころに困ったり、シンプルだけどあまりピンとくるものじゃなかったりすることも多いので、個人的によく使うものをまとめてみました。

反転

マウスホバー

昔からある伝統的なエフェクトですね。まずエフェクト付けるとなったら取りあえずこれ付けて様子見してます。

<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%;
}

下線が伸びる:その1

マウスホバー

左から下線が伸びて出てくるパターンです。主にヘッダーメニューなどで見かける気がします。

<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%;
}

下線が伸びる:その2

マウスホバー

その1の中心から伸びるパターンです。これもヘッダーメニューなどでたまに見かけますね。

<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%;
}

TOMIX編集部

株式会社トミックス