自作【hoverアニメーション】で差別化♡シンプルなのにこだわってる風CSS

2023/07/07 | 2023/02/22 676

この記事を書いている人

Marie

フリーランスwebデザイナー＆講師
2児ママ
制作会社・インハウスデザイナーを経験し独立
オンラインwebデザイン教室ちいウェブ運営
仕事の合間の息抜きに植物を育てています♡
スプラ・DIY・将棋がすき

もっと詳しくみる

このhoverアニメを作っていきます。

hoverしてみてね

[目次]

1 hoverアニメーションの作り方
- 1.1 円
- 1.2 アイコン

hoverアニメーションの作り方

これを作るのに必要なパーツは以下の2つです。

円

アイコン

この2つをhtmlでマークアップし、CSSで変化をつけてアニメーションにします。

実は、ボーダーの太さとカラーを変更しているだけです。

<div class="btn">
	<a href="#">
		<i class="fa-brands fa-instagram"></i>
	</a>
</div>

.btn {
	background:linear-gradient(67deg,rgb(72,233,251) 0%,rgb(216,200,255) 49%,rgb(72,233,251) 100%);
	width: 100px;
	height: 100px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 50px solid cornflowerblue;
	overflow: hidden;
	transition: 1s;
}
.btn:hover {
	border: 0 solid white;
}

.btn a {
	color: white;
	font-size: 24px;
	display: block;
}

hover時にボーダーの太さとカラーを変えているだけです。

border: 50px solid cornflowerblue;

↓

border: 0 solid white;

transitionに入れた秒数をかけて変わっていきます