【コピペOK】おしゃれなSNSアイコンをCSSだけで実装する方法

記事内に商品プロモーションが含まれる場合がございます。本サイトはステマ規制への対応をしてます。

こんにちは、ゆうが(@yuuuugablog)です。
今回は、おしゃれなSNSアイコンをCSSだけで実装する方法を紹介していきます。完成イメージは下記の通り。

完成イメージ

SNSアイコンをマウスホバーで色を変える方法

上記のような感じで、マウスホバーしたらアイコンの色が変わるおしゃれなSNSアイコン実装していきます。

この記事を書いた人

滝田裕雅 たきたゆうが サイト運営者

滝田裕雅

ゆうがブログ運営者・ブロガー

「正しい知識を正しく届ける。」を理念にサイトを運営しています。その分野の専門家の記事や論文、私の実体験をもとに情報に誤りのない記事を作成しています。プロフィールの詳細&記事編集ポリシーはこちら

おしゃれなSNSアイコンのHTML

今回はFont Awesomeを使用して実装していくので、予めご用意してくださいませ。
【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

HTML
 <ul class="socialEffect__box">
        <li>
          <a class="socialEffect__link icon-instagram" href="#"
            ><i class="fab fa-instagram"></i
          ></a>
        </li>
        <li>
          <a class="socialEffect__link icon-facebook" href="#"
            ><i class="fab fa-facebook-f"></i
          ></a>
        </li>
        <li>
          <a class="socialEffect__link icon-twitter" href="#"
            ><i class="fab fa-twitter"></i
          ></a>
        </li>
      </ul>

まずはこちらのHTMLをコピーして、自分がSNSアイコンを表示したい場所に貼りつけてください。

MEMO
href="#"の部分は、自分のアカウントのURLを貼ってください。

おしゃれなSNSアイコンのCSS

では、完成イメージのようになるCSSを紹介していきます。

CSS

/* 共通のアイコンエフェクト */
.socialEffect__link {
  margin: .3em;
  display: block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  z-index: 1;
  color: #bfbfbf;
  font-size: 1.6rem;
  background: rgba(255, 255, 255, 0.1);
  transition: transform ease-out 0.2s;
}

.socialEffect__box li {
  display: inline-block;
}


/* インスタ用アイコン設定 */
.icon-instagram::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
  transform: scale(0.9);
}
.fab.fa-instagram {
  display: inline-block;
  color: #fff;
}
.icon-instagram:hover {
  background: radial-gradient(
      circle farthest-corner at 32% 106%,
      rgb(255, 225, 125) 0%,
      rgb(255, 205, 105) 10%,
      rgb(250, 145, 55) 28%,
      rgb(235, 65, 65) 42%,
      transparent 82%
    ),
    linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
  transform: scale(0.9);
}

/* フェイスブック用アイコン設定 */
.icon-facebook::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
  transform: scale(0.9);
}
.fab.fa-facebook-f {
  display: inline-block;
  color: #fff;
}
.icon-facebook:hover {
  background: #3b5998;
  transform: scale(0.9);
}

/* ツイッター用アイコン設定 */
.icon-twitter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
  transform: scale(0.9);
}
.fab.fa-twitter {
  display: inline-block;
  color: #fff;
}
.icon-twitter:hover {
  background: #00b0ed;
  transform: scale(0.9);
}

これで実装が完了です。あとはお好みで微調整をしていただければいいと思います。

BoostNoteに保存すると、爆速で実装できる

BoostNoteに保存すると、爆速で実装できる

最後になりますが「BoostNote」というプログラミングに特化したメモアプリを使うと、今回のコードを保存してWeb制作をする際に爆速で実装できるようになります。

  • わざわざサイトからコピペするのめんどくさい
  • もっと効率的にデザインを実装したい

という方は、ぜひBoostNoteを使ってみてください。詳しくは下記の記事にて解説しています。

【完全無料】BoostNoteの特徴や使い方を解説【完全無料】BoostNoteの特徴や使い方を解説