記事内に商品プロモーションが含まれる場合があります
今回はインスタグラムのフォローボタンのデザイン例をいくつか紹介します。使うのは、HTMLとCSSだけです。コードをコピペして頂いても構いません。
インスタグラムといえばグラデーション
インスタグラムのロゴは2016年にアップデートされ、美しいグラデーションがかかったものとなりました。この赤・青・黄が混ざりあったような色合いを再現すると、「インスタグラムのボタン」だということが一目見て分かるのではないかと思います。
フォローボタン設置用のURL
のちほどフォローボタンのデザイン例を紹介していきますが、リンク先に入れるURLは次の手順で確認しましょう。
インスタグラムを開き、右上の人間のアイコンをクリックします。
自分のプロフィールが開きます。このページのURLをまるっとコピーしましょう。
コピーしたURLに?ref=badgeを足せば、完成です。つまり、フォローボタンに使うURLは次のようになります。
https://www.instagram.com/ユーザー名?ref=badge以下で紹介するコードのaタグの中にhref="#"という部分があるので、ここをa href="フォロー用URL"という形に変えればボタンが完成します。
デザイン1：アプリアイコン風
一つ目に紹介するのは、iPhoneアプリのアイコン風のフォローボタンです。アイコンは、FontAwesomeにより表示しています。FontAwesomeをまだ導入していない方は、以下の記事を参考にしてみてください。
表示例とコード
ホバー時（カーソルを当てたとき）にはテキストの色がじわっと変わるようになっています。
<a href="#" class="insta_btn"> <span class="insta"> <i class="fab 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;/*高さ*/
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;/*高さと合わせる*/
}
↑ 過去のバージョンのFontAwesomeをご利用の場合には、<i class="fab fa-instagram"></i>を<i class="fa fa-instagram"></i>に書き換えてくださいませ。
CSSの解説
コードが長くなってしまっている理由は、この図のようにグラデーションを２つ重ねているからです。①左上右下（青ピンク）の変化に加え、②黄橙の円形グラデーションも加えているのです。
グラデーション②については疑似要素.insta:before{〜}で表現しています。正方形からはみ出る部分はoverflow:hiddenにより隠しています。ちなみに、擬似要素の使い方はこちら の記事で解説しています。
次に白のアイコン部分.fa-instagram{〜}ですが、このままだとグラデーション②の下に隠れてしまうので、position:relativeとz-indexを指定しています（relativeにしないとz-indexが使えません。詳細は以下の記事で）。
その他、アイコンのサイズや、テキストなどは必要に応じて変えて頂ければと思います。
テキストを変えてみる
これは個人的な好みですが「Follow Me」や「フォローする」というテキストではなく「@ユーザー名」とすると、直感的にフォローボタンであることが分かりやすいのではないかと思います。
↑サルワカではインスタをやっていないので、Twitterへのリンクにしました。
アイコンに影をつけてみる
box-shadowによりアイコンに影をつけ、カーソルを当てると浮かび上がるようにしてみます。この表現をするには、.insta_btn .instaと.insta_btn .insta:hoverに以下のコードを追加します。
さきほどと同じ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：文字もグラデーションにのせる
アイコンだけでなく文字もグラデーションの上にのせて、横長のボタンにしてみました。コードは以下のようになります。
表示例とコード
↑カーソルを当てると、テキストがくるっと回転するホバーエフェクトをかけています。
<a href="#" class="insta_btn2"> <i class="fab 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;/*高さと合わせる*/
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);
}
↑ 過去のバージョンのFontAwesomeをご利用の場合には、<i class="fab fa-instagram"></i>を<i class="fa fa-instagram"></i>に書き換えてくださいませ。
コードの解説
例1と同様に、グラデーションを２つかけています。２つのグラデーションは擬似要素により表現しています。ホバー時にはテキストが.insta_btn2:hover{〜}でくるんと回転する動きをつけていますが、不要であればまるごと消せばOKです。ボタンサイズ（widthとheight）は自由に数字を変えてもらえばOKです。
デザイン3：正方形ボタン
デザイン2に少し手を加えて、正方形にしてみたものです。今度はボタンにカーソルを当てると、アイコンがくるんと回転するようにしてみました。
表示例とコード
<a href="#" class="insta_btn3"> <i class="fab 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);
}
↑ 過去のバージョンのFontAwesomeをご利用の場合には、<i class="fab fa-instagram"></i>を<i class="fa fa-instagram"></i>に書き換えてくださいませ。
上の例では、ボタンの幅を小さめにしているため、スマホでもPCでも同じCSSで表示させれば良いかと思います。参考になれば幸いです。
