webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

【CSS】シンプルなのにこだわってる風ホバーエフェクト

円ボタンオリジナルアニメーション
この記事を書いている人
Marie

Marie

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

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

hoverしてみてね

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に入れた秒数をかけて変わっていきます

いいなと思ったら
TAPしてね♡↓

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング コピペ用コード 【CSS】シンプルなのにこだわってる風ホバーエフェクト

関連記事

更新通知を受け取る

不定期更新の為、
メールにて更新お知らせを
お送りいたしますlove letter

(更新通知以外のメールは
お送りしませんので
ご安心ください)