【コピペOK】よく使われがちなマウスホバーのCSSパターン１０選と作り方

2018年10月7日2021年11月29日

マウスホバーのパターンを１０個まとめました。

ホバー時の動きは、基本的には指示がなくコーダーに一任されることが多いので、自分の中で「お決まり」のホバーアクションを決めておくとコーディングが捗るかもしれません。

ちなみにわたしは、無難な「透過」ばっかり使っています！

はにわまん

ホバーアニメーションが分かると楽しいです！

マウスホバーのパターン１０選

実際に動きを確認できるようにしてますので、マウスを合わせてどのように動くか見てみてください！

ひとまず、動作が分かる要素とコードを10個ペタペタ貼っていきます。簡単な解説はその後します。

透明に近づける

ボタン

<div class="hover1">ボタン</div>

.hover1 {
	display: inline-block;
	padding: 0.6em 2em;
	margin: 0 0 1em;
	background-color: #4CAF50;
	color: #fff;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}
.hover1:hover {
	opacity: 0.6;
}

色が反転

ボタン

<div class="hover2">ボタン</div>

.hover2 {
	display: inline-block;
	padding: 0.6em 2em;
	margin: 0 0 1em;
	background: #fff;
	border: 0.1875em solid #333;
	color: #333;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}
.hover2:hover {
	background: #333;
	color: #fff;
}

凹むボタン

ボタン

<div class="hover3">ボタン</div>

.hover3 {
	border-bottom: 0.1875em solid #1B5E20;
	background-color: #4CAF50;
	color: #fff;
	display: inline-block;
	padding: 0.6em 2em;
	margin: 0 0 1em;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}
.hover3:hover {
	border-bottom-color: transparent;
	transform: translateY(0.1875em);
}

浮き上がって影

ボタン

<div class="hover4">ボタン</div>

.hover4 {
	box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.25);
	background-color: #4CAF50;
	color: #fff;
	display: inline-block;
	padding: 0.6em 2em;
	margin: 0 0 1em;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}
.hover4:hover {
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
	transform: translateY(-0.1875em);
}

X軸で回転

<img src="https://haniwaman.com/cms/wp-content/uploads/2018/02/cat-150x150.jpg" alt="" class="hover5" />

.hover5 {
	transition: all 1s linear 0s;
	border-radius: 50%;
	cursor: pointer;
}
.hover5:hover {
	transform: rotateX(360deg);
}

Y軸で回転

<img src="https://haniwaman.com/cms/wp-content/uploads/2018/02/cat-150x150.jpg" alt="" class="hover6" />

.hover6 {
	transition: all 1s linear 0s;
	border-radius: 50%;
	cursor: pointer;
}
.hover6:hover {
	transform: rotateY(360deg);
}

時計回りに回転

<img src="https://haniwaman.com/cms/wp-content/uploads/2018/02/cat-150x150.jpg" alt="" class="hover7" />

.hover7 {
	transition: all 1s linear 0s;
	border-radius: 50%;
	cursor: pointer;
}
.hover7:hover {
	transform: rotateZ(360deg);
}

画像が拡大

<img src="https://haniwaman.com/cms/wp-content/uploads/2018/02/cat-150x150.jpg" alt="" class="hover10" />

.hover10 {
	border-radius: 50%;
	transition: all 0.6s ease 0s;
}
.hover10:hover {
	cursor: pointer;
	transform: scale(1.1, 1.1);
}

色を変える

テキスト

<a class="hover8" href="#">テキスト</a>

.hover8 {
	display: inline-block;
	transition: all 0.3s ease 0s;
	cursor: pointer;
}
.hover8:hover {
	color: #4CAF50;
}

アンダーラインが登場

テキスト

<a class="hover9" href="#">テキスト</a>

.hover9 {
	display: inline-block;
	position: relative;
	text-decoration: none;
}
.hover9::after {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: #2196F3;
	transition: all 0.3s ease 0s;
}
.hover9:hover {
	cursor: pointer;
}
.hover9:hover::after {
	width: 100%;
}

hoverとtransitionをセットで使おう！

マウスホバー時にちょっとしたアニメーションを加えると、ユーザーにとって少し過ごし良さそうなサイトの印象をもたせられるようなになります。

実例を見ていきましょう。おそらく「transitionあり」の方がフワッとして居心地よさそうに感じるかと思います。

transitionあり

transitionなし

アニメーションと言っても、凝ったことはしていません。hoverした後に透過させるとか色を変えるとかのコードを書くと思いますが、このhoverした時のCSSを反映させるまでの時間をtransitionで指定するだけです。

transitiontあり、なしで、コードがどう違うか見てみると、以下のとおりです。
※ 左が「あり」、右が「なし」

transition: all 0.3s ease 0s;があるかないかの差でしかありません。hoverを反映させるまでの時間が0.3s（0.3秒）ということになります。他の指定は基本的には変えなくても大丈夫です。あと注意点としては:hoverの疑似要素側ではない方に記載するようにしてください（カーソル外した時の動きがバグるので…）

これを書く書かないのちょっとした差ですが、知っていれば書くことに労力はありませんし、これだけでサイトがちょっといい感じにできるので積極的に使っていくのがいいかと思います！

transitionのアニメーションをもっと勉強したい方は、以下の記事を参考にしてください！
https://haniwaman.com/css-transition/