美しいInstagramフォローボタンのCSSデザイン例と設置方法

今回はインスタグラムのフォローボタンのデザイン例をいくつか紹介します。使うのは、HTMLとCSSだけです。コードをコピペして頂いても構いません。

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

Instagramのロゴ

インスタグラムのロゴは2016年にアップデートされ、美しいグラデーションがかかったものとなりました。この赤・青・黄が混ざりあったような色合いを再現すると、「インスタグラムのボタン」だということが一目見て分かるのではないかと思います。

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

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

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

インスタグラムを開き、右上の人間のアイコンをクリックします。

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

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

コピーしたURLに?ref=badgeを足せば、完成です。つまり、フォローボタンに使うURLは次のようになります。

https://www.instagram.com/ユーザー名?ref=badge

以下で紹介するコードのaタグの中にhref="#"という部分があるので、ここをa href="フォロー用URL"という形に変えればボタンが完成します。

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

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

一つ目に紹介するのは、iPhoneアプリのアイコン風のフォローボタンです。アイコンは、FontAwesomeにより表示しています。FontAwesomeをまだ導入していない方は、以下の記事を参考にしてみてください。

表示例とコード

ホバー時(カーソルを当てたとき)にはテキストの色がじわっと変わるようになっています。


HTML
<a href="#" class="insta_btn">
	<span class="insta">
		<i class="fa fa-instagram"></i>
	</span> 
	Follow Me
</a>
CSS
.insta_btn {
  display: inline-block;
  text-align: center;/*中央揃え*/
  color: #2e6ca5;/*文字色*/
  font-size: 20px;/*文字サイズ*/
  text-decoration: none;/*下線消す*/
}

.insta_btn:hover {/*ホバー時*/
  color:#668ad8;/*文字色*/
  transition: .5s;/*ゆっくり変化*/
}

.insta_btn .insta{/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 50px;/*幅*/
  height: 50px;/*高さ*/
  vertical-align: middle;/*垂直中央に*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  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: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  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;/*高さと合わせる*/
}

CSSの解説

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

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

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

次に白のアイコン部分.fa-instagram{〜}ですが、このままだとグラデーション②の下に隠れてしまうので、position:relativez-indexを指定しています(relativeにしないとz-indexが使えません。詳細は以下の記事で)。

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

テキストを変えてみる

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

↑サルワカではインスタをやっていないので、Twitterへのリンクにしました。

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

box-shadowによりアイコンに影をつけ、カーソルを当てると浮かび上がるようにしてみます。この表現をするには、.insta_btn .insta.insta_btn .insta:hoverに以下のコードを追加します。

HTML
さきほどと同じ
CSS
さきほどと同じコード+以下を追加
.insta_btn .insta{
	box-shadow: 0px 1px 2px rgba(25, 25, 25, 0.50);
	transition: .4s;
}
.insta_btn .insta:hover{
	box-shadow: 0px 2px 3px rgba(25, 25, 25, 0.50);
}

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

ボタンデザインその2

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

表示例とコード


↑カーソルを当てると、テキストがくるっと回転するホバーエフェクトをかけています。

HTML
<a href="#" class="insta_btn2">
	<i class="fa fa-instagram"></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;/*高さと合わせる*/
  vertical-align: middle;/*垂直中央寄せ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  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: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  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: .5s
}

.insta_btn2:hover span{/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

コードの解説

例1と同様に、グラデーションを2つかけています。2つのグラデーションは擬似要素により表現しています。ホバー時にはテキストが.insta_btn2:hover{〜}でくるんと回転する動きをつけていますが、不要であればまるごと消せばOKです。ボタンサイズ(widthとheight)は自由に数字を変えてもらえばOKです。

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

正方形のフォローボタン

デザイン2に少し手を加えて、正方形にしてみたものです。今度はボタンにカーソルを当てると、アイコンがくるんと回転するようにしてみました。

表示例とコード

Follow Me
HTML
<a href="#" class="insta_btn3">
	<i class="fa fa-instagram"></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: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  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: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  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;
    position: relative;
    transition: .5s
}

.insta_btn3 .fa-instagram:hover {/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

aタグの中にdivタグを入れていますが、HTML5なので問題ないでしょう。上の例では、ボタンの幅を小さめにしているため、スマホでもPCでも同じコードで表示させれば良いのではないかと思います。参考になれば幸いです。

サルワカ