今回はインスタグラムのフォローボタンのデザイン例をいくつか紹介します。HTMLとCSSに加えて、Font Awesome 7 FreeのBrands Web FontsとCSSを読み込んで使います。これはプロフィールへのリンクであり、クリックだけでフォローが完了するボタンではありません。コードをコピペして頂いても構いません。

インスタグラムといえばグラデーション

Instagramのロゴ

画像は2016年に更新された当時のInstagramロゴです。以下では、そのグラデーションを参考にしたデザインを紹介します。この赤・青・黄が混ざりあったような色合いを再現すると、「インスタグラムのボタン」だということが一目見て分かるのではないかと思います。

フォローボタン設置用のURL

のちほどフォローボタンのデザイン例を紹介していきますが、リンク先に入れるURLは次の手順で確認しましょう。

instagramで自分のプロフィールへ

インスタグラムを開き、自分のプロフィールへ移動します。画像は旧画面のため、現在はアイコンの位置や操作が異なる場合があります。

プロフィールのURLをコピー

自分のプロフィールが開きます。このページのURLをまるっとコピーしましょう。

通常のプロフィールURLをそのまま使います。?ref=badgeを追加する必要はありません。リンク先は次の形式です。

プロフィールURL
https://www.instagram.com/ユーザー名/

以下で紹介するコードのaタグの中にhref="#"という部分があるので、ここを自分のプロフィールURLに置き換えます。プロフィールを開いた後のフォロー操作は、Instagram側で行います。

デザイン1：アプリアイコン風

iphoneアプリアイコンデザイン風

一つ目に紹介するのは、iPhoneアプリのアイコン風のフォローボタンです。アイコンは、FontAwesomeにより表示しています。Font Awesome 7 FreeのWeb Fonts方式でfontawesome.css・brands.cssと対応するwebfontsを読み込んでください。公式の導入手順と、以下の記事も参考になります。

あわせて読みたい【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

表示例とコード

カーソルを当てるかキーボードでフォーカスすると、テキストの色が変わります。動きを減らす設定では、アニメーションを行いません。

HTML
<a href="#" aria-label="Follow Me: Instagramのプロフィールを開く" class="insta_btn">
	<span class="insta">
		<i class="fa-brands fa-instagram fa-width-auto" aria-hidden="true"></i>
	</span> 
	Follow Me
</a>
CSS
.insta_btn {
  display: inline-block;
  transition: color .5s;
  text-align: center;/*中央揃え*/
  color: #2e6ca5;/*文字色*/
  font-size: 20px;/*文字サイズ*/
  text-decoration: none;/*下線消す*/
}

.insta_btn:hover, .insta_btn:focus-visible {/*ホバー時*/
  color:#668ad8;/*文字色*/

}

.insta_btn .insta{/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 50px;/*幅*/
  height: 50px;/*高さ*/
  vertical-align: middle;

  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  border-radius: 13px;/*角丸に*/

}

.insta_btn .insta::before{/*グラデーションを重ねるため*/
  content: '';
  position: absolute;/*絶対配置*/
  top: 23px;/*ずらす*/
  left: -18px;/*ずらす*/
  width: 60px;/*グラデーションカバーの幅*/
  height: 60px;/*グラデーションカバーの高さ*/

  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

.insta_btn .fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 35px;/*アイコンサイズ*/
  line-height: 50px;/*高さと合わせる*/
}
.insta_btn:focus-visible { outline: 3px solid #333; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .insta_btn { transition: none; }
}

この例はFont Awesome 7 FreeのBrandsを使用しています。アイコンは装飾としてaria-hiddenを付け、リンクにはキーボードで見えるフォーカス枠を指定しています。

CSSの解説

グラデーションを２つ重ねている

コードが長くなってしまっている理由は、この図のようにグラデーションを２つ重ねているからです。①左上右下（青ピンク）の変化に加え、②黄橙の円形グラデーションも加えているのです。

グラデーション②については疑似要素.insta::before{〜}で表現しています。正方形からはみ出る部分はoverflow:hiddenにより隠しています。ちなみに、擬似要素の使い方はこちら の記事で解説しています。

あわせて読みたいCSSの疑似要素とは？beforeとafterの使い方まとめ

次に白のアイコン部分.fa-instagram{〜}ですが、このままだとグラデーション②の下に隠れてしまうので、position:relativeとz-indexを指定しています（この例ではposition: relativeで重なり順を指定しています。z-indexはposition指定のある要素のほか、flex/gridアイテムなどにも適用できます）。

あわせて読みたいCSSのpositionを総まとめ！absoluteやfixedの使い方は？ あわせて読みたいz-indexの使い方：CSSで重なり順を指定する

その他、アイコンのサイズや、テキストなどは必要に応じて変えて頂ければと思います。

テキストを変えてみる

これは個人的な好みですが「Follow Me」や「フォローする」というテキストではなく「@ユーザー名」とすると、直感的にフォローボタンであることが分かりやすいのではないかと思います。

↑旧記事ではInstagramの代わりにTwitter（現X）へのリンクを見本に使用していました。この見本のリンク先はXです。実際に使うときは自分のInstagramプロフィールURLと表示名へ置き換えてください。

アイコンに影をつけてみる

box-shadowによりアイコンに影をつけ、カーソルを当てると浮かび上がるようにしてみます。以下は影を加えた完全なコードです。リンク全体へのホバーとキーボードフォーカスで、アイコンの影が変化します。この影の例のhrefには旧記事のXリンクが入っているので、自分のInstagramプロフィールURLへ置き換えてください。

HTMLコード
<a href="https://twitter.com/saruwakakun" aria-label="@saruwakakun: Xのプロフィールを開く（旧記事のリンク例）" class="insta_btn">
	<span class="insta">
		<i class="fa-brands fa-instagram fa-width-auto" aria-hidden="true"></i>
	</span> 
	@saruwakakun
</a>
CSSコード
.insta_btn {
  display: inline-block;
  transition: color .5s;
  text-align: center;/*中央揃え*/
  color: #2e6ca5;/*文字色*/
  font-size: 20px;/*文字サイズ*/
  text-decoration: none;/*下線消す*/
}

.insta_btn:hover, .insta_btn:focus-visible {/*ホバー時*/
  color:#668ad8;/*文字色*/

}

.insta_btn .insta{/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 50px;/*幅*/
  height: 50px;/*高さ*/
  vertical-align: middle;

  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  border-radius: 13px;/*角丸に*/

}

.insta_btn .insta::before{/*グラデーションを重ねるため*/
  content: '';
  position: absolute;/*絶対配置*/
  top: 23px;/*ずらす*/
  left: -18px;/*ずらす*/
  width: 60px;/*グラデーションカバーの幅*/
  height: 60px;/*グラデーションカバーの高さ*/

  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

.insta_btn .fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 35px;/*アイコンサイズ*/
  line-height: 50px;/*高さと合わせる*/
}
.insta_btn:focus-visible { outline: 3px solid #333; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .insta_btn { transition: none; }
}
.insta_btn .insta {
  box-shadow: 0 1px 2px rgba(25, 25, 25, .5);
  transition: box-shadow .4s;
}
.insta_btn:hover .insta, .insta_btn:focus-visible .insta {
  box-shadow: 0 2px 3px rgba(25, 25, 25, .5);
}
@media (prefers-reduced-motion: reduce) {
  .insta_btn .insta { transition: none; }
}
ブラウザ表示

デザイン2：文字もグラデーションにのせる

ボタンデザインその2

アイコンだけでなく文字もグラデーションの上にのせて、横長のボタンにしてみました。コードは以下のようになります。

表示例とコード

↑カーソルを当てるかキーボードでフォーカスすると、テキストが回転します。動きを減らす設定では回転しません。

HTML
<a href="#" aria-label="Follow Me: Instagramのプロフィールを開く" class="insta_btn2">
	<i class="fa-brands fa-instagram fa-width-auto" aria-hidden="true"></i> <span>Follow Me</span>
</a>
CSS
.insta_btn2{/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 50px;/*高さ*/
  width: 190px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 25px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/

  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.insta_btn2::before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/

  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.insta_btn2 .fa-instagram{/*アイコン*/
  font-size: 35px;/*アイコンサイズ*/
  position: relative;
  top: 4px;/*アイコン位置の微調整*/
}

.insta_btn2 span {/*テキスト*/
  display:inline-block;
  position: relative;
  transition: transform .5s;
}

.insta_btn2:hover span, .insta_btn2:focus-visible span{/*ホバーで一周回転*/


  transform: rotateX(360deg);
}
.insta_btn2:focus-visible { outline: 3px solid #333; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .insta_btn2 span { transition: none; }
  .insta_btn2:hover span, .insta_btn2:focus-visible span { transform: none; }
}

この例はFont Awesome 7 FreeのBrandsを使用しています。アイコンは装飾としてaria-hiddenを付け、リンクにはキーボードで見えるフォーカス枠を指定しています。

コードの解説

例1と同様に、グラデーションを２つかけています。１つはボタン本体、もう１つは疑似要素に指定しています。テキストの回転は.insta_btn2:hover spanと.insta_btn2:focus-visible spanに指定しています。不要なら両方のtransform指定を削除します。ボタンサイズ（widthとheight）は自由に数字を変えてもらえばOKです。

デザイン3：正方形ボタン

正方形のフォローボタン

デザイン2に少し手を加えて、正方形にしてみたものです。今度はボタン全体にカーソルを当てるかキーボードでフォーカスすると、アイコンが回転します。動きを減らす設定では回転しません。

表示例とコード

HTML
<a href="#" aria-label="Follow Me: Instagramのプロフィールを開く" class="insta_btn3">
	<i class="fa-brands fa-instagram fa-width-auto" aria-hidden="true"></i><div>Follow Me</div>
</a>
CSS
.insta_btn3 {/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 14px;/*角丸に*/
  position: relative;
  display: block;
  height: 120px;/*高さ*/
  width: 120px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  padding-top: 12px;/*上側との余白*/
  box-sizing: border-box;
  font-size: 19px;/*文字のサイズ*/

  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.insta_btn3::before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/

  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.insta_btn3 div {
	position: relative;
}

.insta_btn3 .fa-instagram {
    font-size: 70px;/*アイコンサイズ*/
    position: relative;
    display:inline-block;
    transition: transform .5s;
}

.insta_btn3:hover .fa-instagram, .insta_btn3:focus-visible .fa-instagram {/*ホバーで一周回転*/


  transform: rotateX(360deg);
}
.insta_btn3:focus-visible { outline: 3px solid #333; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .insta_btn3 .fa-instagram { transition: none; }
  .insta_btn3:hover .fa-instagram, .insta_btn3:focus-visible .fa-instagram { transform: none; }
}

この例はFont Awesome 7 FreeのBrandsを使用しています。アイコンは装飾としてaria-hiddenを付け、リンクにはキーボードで見えるフォーカス枠を指定しています。

上の例では、ボタンの幅を小さめにしているため、スマホでもPCでも同じCSSで表示させれば良いかと思います。参考になれば幸いです。