ホバーをするとゆっくり背景に色がついていくSNSアイコンを実装！ソースコードあり！

2023年12月17日
コラム
HTML/CSS

コラム

1 はじめに
2 SNSアイコンの表示
3 SNSアイコンソースコード例
4 hoverすると背景に色がついていくパターンの表示
- 4.1 hoverすると背景に色がついていくパターンのCSS
- 4.2 instagramのアイコンのみtransitionが効いていない
  - 4.2.1 変更前
  - 4.2.2 変更後
5 まとめ
6 他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ

はじめに

今回は実務経験で実装をしたSNSアイコンを紹介します。まずは最初から背景に色がついた状態のSNSアイコンをご覧ください。

SNSアイコンの表示

SNSアイコンソースコード例

<div class="sns__list">
	<div class="sns__item">
		<a href="#" class="sns__link sns-facebook">
			<img src="images/facebook.svg" alt="facebook">
		</a>
	</div>
	<div class="sns__item">
		<a href="#" class="sns__link sns-twitter">
			<img src="images/twitter.svg" alt="twitter">
		</a>
	</div>
	<div class="sns__item">
		<a href="#" class="sns__link sns-insta">
			<img src="images/insta.svg" alt="insta">
		</a>
	</div>
	<div class="sns__item">
		<a href="#" class="sns__link sns-line">
			<img src="images/line.svg" alt="line">
		</a>
	</div>
	<div class="sns__item">
		<a href="#" class="sns__link sns-youtube">
			<img src="images/youtube.svg" alt="youtube">
		</a>
	</div>
	<div class="sns__item">
		<a href="#" class="sns__link sns-hatebu">
			<img src="images/hatebu.svg" alt="hatebu">
		</a>
	</div>
	<div class="sns__item">
		<a href="#" class="sns__link sns-linkedin">
			<img src="images/linkedin.svg" alt="linkedin">
		</a>
	</div>
	<div class="sns__item">
		<a href="#" class="sns__link sns-pocket">
			<img src="images/pocket.svg" alt="pocket">
		</a>
	</div>
	<div class="sns__item">
		<a href="#" class="sns__link sns-feedly">
			<img src="images/feedly.svg" alt="feedly">
		</a>
	</div>
</div>

.sns__list {
    display: flex;
    flex-wrap: wrap;
}
.sns__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 50%;
}
.sns__link img {
    width: 30px;
    height: 30px;
}
.sns-facebook {
    background: #3b5998;
}
.sns-twitter {
    background: #00b0ed;
}
.sns-line {
    background: #00b900;
}
.sns-insta {
    background: radial-gradient(circle farthest-corner at 32% 106%,#ffe17d 0,#ffcd69 10%,#fa9137 28%,#eb4141 42%,transparent 82%),linear-gradient(135deg,#234bd7 12%,#c33cbe 58%);
}
.sns-youtube {
    background: #cd201f;
}
.sns-hatebu {
    background: #5279e7;
}
.sns-linkedin {
    background: #0070ba;
}
.sns-pocket {
    background: #eb4654;
}
.sns-feedly {
    background: #2ab14c;
}
@media screen and (min-width: 768px) {
    .sns__item {
        width: 11%;
    }
}
@media screen and (max-width: 767px) {
    .sns__list {
        row-gap: 20px;
    }
    .sns__item {
        width: 11%;
    }
}

hoverすると背景に色がついていくパターンの表示

スマホではhoverできないので、非表示にしています。PC画面でご覧ください。

hoverすると背景に色がついていくパターンのCSS

.sns__list {
    display: flex;
    flex-wrap: wrap;
}
.sns__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 50%;
}
.sns__link img {
    width: 30px;
    height: 30px;
}
@media screen and (min-width: 768px) {
    .sns__item {
        width: 11%;
    }
    .sns__list .sns__link {
        background: #191919;
        transition: all 0.8s;
    }
    .sns__list .sns-facebook:hover {
        background: #3b5998;
    }
    .sns__list .sns-twitter:hover {
        background: #00b0ed;
    }
    .sns__list .sns-line:hover {
        background: #00b900;
    }
    .sns__list .sns-insta:hover {
        background: radial-gradient(circle farthest-corner at 32% 106%,#ffe17d 0,#ffcd69 10%,#fa9137 28%,#eb4141 42%,transparent 82%),linear-gradient(135deg,#234bd7 12%,#c33cbe 58%);
    }
    .sns__list .sns-youtube:hover {
        background: #cd201f;
    }
    .sns__list .sns-hatebu:hover {
        background: #5279e7;
    }
    .sns__list .sns-linkedin:hover {
        background: #0070ba;
    }
    .sns__list .sns-pocket:hover {
        background: #eb4654;
    }
    .sns__list .sns-feedly:hover {
        background: #2ab14c;
    }
}
@media screen and (max-width: 767px) {
    .sns-facebook {
        background: #3b5998;
    }
    .sns-twitter {
        background: #00b0ed;
    }
    .sns-line {
        background: #00b900;
    }
    .sns-insta {
        background: radial-gradient(circle farthest-corner at 32% 106%,#ffe17d 0,#ffcd69 10%,#fa9137 28%,#eb4141 42%,transparent 82%),linear-gradient(135deg,#234bd7 12%,#c33cbe 58%);
    }
    .sns-youtube {
        background: #cd201f;
    }
    .sns-hatebu {
        background: #5279e7;
    }
    .sns-linkedin {
        background: #0070ba;
    }
    .sns-pocket {
        background: #eb4654;
    }
    .sns-feedly {
        background: #2ab14c;
    }
}

PCの時はアイコンの背景を黒にしておいて、hoverすると色がつきます。スマホの時は色がついた状態にしています。

instagramのアイコンのみtransitionが効いていない

instagramのアイコンのみbackgroundプロパティに「radial-gradient」と「linear-gradient」を使用しているためtransitionが効かないです。hoverしたときに色がすぐについてhoverをやめると色がすぐに消えてしまいます。

なので上記で紹介したcssの下記部分のcssを変更してください。

変更前

@media screen and (min-width: 768px) {
    /* 省略 */
    .sns__list .sns-insta:hover {
        background: radial-gradient(circle farthest-corner at 32% 106%,#ffe17d 0,#ffcd69 10%,#fa9137 28%,#eb4141 42%,transparent 82%),linear-gradient(135deg,#234bd7 12%,#c33cbe 58%);
    }
    /* 省略 */
}

変更後

@media screen and (min-width: 768px) {
    /* 省略 */
    .sns__list .sns-insta {
        position: relative;
        background: radial-gradient(circle farthest-corner at 32% 106%,#ffe17d 0,#ffcd69 10%,#fa9137 28%,#eb4141 42%,transparent 82%),linear-gradient(135deg,#234bd7 12%,#c33cbe 58%);
    }
    .sns__list .sns-insta img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    .sns__list .sns-insta::before {
        content: "";
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        background: #191919;
        transition: all 0.8s;
    }
    .sns__list .sns-insta:hover::before {
        opacity: 0;
    }
    /* 省略 */
}

変更をすると他のアイコンと同じようにInstagramのアイコンもtransitionが効くようになります。

まとめ

実際の案件ではPCではホバーで背景に色がついていくもので実装をし、スマホでは最初から背景に色がついている状態で実装をしました。

instagramのアイコンの背景の部分は工夫が必要なので参考になると思います。

他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ

ソースコードまとめ

HTML・CSS ・JavaScriptソースコード紹介記事まとめ

実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。