WordPressカスタマイズまとめ←クリック

9種類のSNSフォローボタンCSSデザイン【14選】と各URL解説

SNSボタンカスタマイズ

この記事では、コピペで使える「9種類」のSNSフォローボタンのCSSデザインを「14パターン」載せています。

各SNSの「URL記載箇所」などについても解説しています。

SNSフォローボタンのCSSデザイン14パターン

※画像をクリックすると拡大表示できます

この記事で紹介しているSNSアイコンは「Font Awesome」と「IcoMoon」のものを併用しています。

Font Awesome」については、最新の「バージョン5」を使用しているので、まだ導入していない方はこちらの記事へ

ストークFont-Awesomeアップデート STORKでFont Awesome 5アップデート後に修正したところ

ただし、現状のテーマがバージョン4.7の場合、アップデートすると4.7のアイコンが崩れます。

以前使っていた「ストーク」の場合は修正箇所が数カ所で済んだので、アップデートしましたが現在使っている「SANGO」の場合はかなり修正が必要なので、現在は4.7を使用しています。

修正箇所がかなりある場合、アップデートするにはそれなりの専門的な知識と手間がかかるので、もしよくわからなければ4.7のアイコンコードをそのまま使用してください。

参考までに4.7で使用するSNSアイコンコードも載せておきます。

SNSアイコンコード
Twitter<i class="fa fa-twitter"></i>
Twitter<i class="fa fa-twitter-square"></i>
Google+<i class="fa fa-google-plus"></i>
Google+<i class="fa fa-google-plus-official"></i>
Google+<i class="fa fa-google-plus-square"></i>
Pocket<i class="fa fa-get-pocket"></i>
Instagram<i class="fa fa-instagram"></i>
Facebook<i class="fa fa-facebook"></i>
Facebook<i class="fa fa-facebook-official"></i>
Facebook<i class="fa fa-facebook-square"></i>
YouTube<i class="fa fa-youtube-play"></i>
YouTube<i class="fa fa-youtube"></i>
YouTube<i class="fa fa-youtube-square"></i>
E-mail<i class="fa fa-envelope"></i>
コードの置き換え例

例えば、バージョン5のTwitterアイコンコードはfab fa-twitterですが、4.7ではfa fa-twitterなので、使ってるバージョンによって上記を参考にしてください。

FeedlyHatenaLINE」のアイコンは以下にzipファイルを用意したので、ダウンロードすればそのまま使えます。

SNSボタンサンプル画像

補足

※「LINE」アイコンについては「Font Awesome5」でも追加されたので好みの方を使ってください。<i class="fab fa-line"></i>

zipファイルをダウンロードしたら解凍してください。

zipファイル解凍

解凍すると「sns-icon」フォルダになるので、そのフォルダをFTPソフトを使って、指定の子テーマフォルダ上にアップロード(ドラッグ&ドロップ)します。

フォルダのアップロード

子テーマの詳しい使い方はこちら

Cyberduckと子テーマの使い方 Cyberduckの使い方WordPressの子テーマを分かりやすく解説

アップロード後「header.php」(header.phpも子テーマにない場合は親テーマからアップロードする必要があります。)のhaedの下に以下のコードを貼り付けてください。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/sns-icon/style.css"> 

テーマヘッダーの編集方法

注意

※フォルダ名を変更する場合は、上記コードのsns-icon部分も変更してください。

ここまでの作業で今回紹介している「9つのアイコン」が使えるようになります。

SNSボタンCSSデザイン1【四角いベタ塗り】

マウスホバー時、ゆっくり上に浮き上がります。

SNSボタンカスタマイズ1

CSSのカスタマイズは、必ず子テーマのスタイルシート (style.css)を使用してください。

子テーマの使い方はこちら

Cyberduckと子テーマの使い方 Cyberduckの使い方WordPressの子テーマを分かりやすく解説

スタイルシート (style.css)編集

style.css
/* ボタン全体 */
.flowbtn{
font-family:'Arial', sans-serif;
border-radius: 4px;
position:relative;
display: inline-block;
width: 66px;
height: 58px;
font-size: 30px;
color: #fff!important;
transition:.5s;
text-decoration:none;
box-shadow:0 1px 2px #999;
}
/* Twitter */
.fl_tw1{
background:#55acee;
}
/* Google+ */
.fl_go1{
background:#ff3333;	
}
/* Facebook */
.fl_fb1{
background:#3b5998;
}
/* はてブ */
.fl_hb1{
background:#1ba5dc;
}
/* Pocket */
.fl_pk1{
background:#ef3f56;
}
/* Feedly */
.fl_fd1{
background:#6cc655;
}
/* YouTube */
.fl_yu1{
background:#fc0d1c;
}
/* LINE */
.fl_li1{
background:#00c300;
}
/* Instagram紫グラデ背景 */
.insta_btn1{
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
overflow:hidden;
}
/* Instagramオレンジグラデ背景 */
.insta_btn1:before{
content: '';
position:absolute;
top:33px;
left:-20px;
width:80px;
height:50px;
background:-webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}
/* ボタン内テキスト調整 */
.flowbtn div{
font-size:11px;	
font-weight:bold;
letter-spacing:0.4px;	
position:relative;
bottom:8px;
}
/* ボタンマウスホバー時 */
.flowbtn:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
}
/* ボタン全体の位置調整 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
padding-right:16px;
}
/* ボタン同士の余白調整 */
.snsbtniti li{
flex:0 0 33%;
text-align:center;
}

ボタン周りの余白は設置場所(親要素)によって自動調整されるので、真ん中に寄らないなぁと思ったらpadding-right:16px;の値をイジってみて下さい

flex:0 0 33%;33%の部分を変更すると、並べる個数を変えられます。

例えば

4つ並びにしたければ、24%へ変更

SNSボタン4つ並びサンプル

5つ並びにしたければ、19%へ変更

SNSボタン5つ並びサンプル

スマホ表示も意識するなら、「3つ」か「4つ並び」にすると綺麗に収まります。

続いて、HTMLコードです。

HTML
<ul class="snsbtniti">
<li><a  href="TwitterのプロフィールURL" class="flowbtn fl_tw"
><i class="fab fa-twitter"></i>
<div>Twitter</div></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn fl_go"><i class="fab fa-google-plus-g"></i>
<div>Google+</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn  fl_fd"><i class="icon-feedly"></i>
<div>Feedly</div></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn fl_pk"><i class="fab fa-get-pocket"></i>
<div>Pocket</div></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn insta_btn"><i class="fab fa-instagram"></i>
<div>Instagram</div></a></li>
<li><a href="FacebookページのURL" class="flowbtn fl_fb"><i class="fab fa-facebook-f"></i>
<div>Facebook</div></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn  fl_hb"><i class="icon-hatena"></i>
<div>Hatena</div></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn fl_yu"><i class="fab fa-youtube"></i>
<div>YouTube</div></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn fl_li"><i class="icon-line"></i>
<div>LINE@</div></a></li>
</ul>

不要なアイコンを消す場合は、<li></li>までを消してください。

例えば、「LINE」を消す場合は<li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn fl_li"><i class="icon-line"></i> <div>LINE@</div></a></li>までです。

青字箇所)がバージョン5のコードなので、4.7を使用している場合は置き換えてください。

それぞれのSNS名(緑字箇所)を変更すればボタン内の文字を変えれます。

SNSボタンカスタマイズ2

続いて、アイコンをクリックした時に指定のページに飛ばす為の「URL」や「ドメイン名」の解説をします。

各SNSのURL表示箇所

Twitter

※画像をクリックすると拡大表示できます

TwitterプロフィールURL

TwitterプロフィールURL

Twitter」にログイン

プロフィール」をクリック

プロフィールページのURL」をコピペする

Google+

※画像をクリックすると拡大表示できます

Google+プロフィールURL

Google+プロフィールURL

Google+」にログイン

プロフィール」をクリック

プロフィールページのURL」をコピペする

Instagram

※画像をクリックすると拡大表示できます

InstagramプロフィールURL

InstagramプロフィールURL

Instagram」にログイン

人型のアイコン」をクリック

プロフィールページのURL」をピペする

Facebookページ

※画像をクリックすると拡大表示できます

FacebookページURL

FacebookページURL

Facebook」にログイン

Facebookページ」をクリック

FacebookページのURL」をピペする

Youtube

※画像をクリックすると拡大表示できます

YouTubeマイチャンネルURL

YouTubeマイチャンネルURL

Youtube」にログイン

マイチャンネル」をクリック

マイチャンネルURL」をコピペする

[email protected]

LINEログイン画面

LINEログイン画面

LINE」にログイン

メールアドレス」を入力

パスワード」を入力

ログイン」をクリック

LINEタイトル

LINEタイトル

LINE@アカウント

[email protected]アカウント

LINEタイトル」をクリック

@より後ろのアカウント名」をコピペする

Feedly・Hatena・Pocket

この3つはそれぞれ「自分のサイトドメイン名」なので、当サイトで言えばkagesai.netの部分です。

以上の作業を行えば、自作SNSボタンの準備完了です。

これ以降はCSSコードとHTMLコードのサンプルのみ載せていくので、変更箇所は上記のことを参考にしてください。

SNSボタンCSSデザイン2【四角い枠線】

マウスホバー時、ベタ塗りボタンに変わる。

SNSボタンカスタマイズ3
style.css
/* ボタン全体 */
.flowbtn2{
font-family:'Arial',sans-serif;
border-radius:4px;
display:inline-block;
width:66px;
height:58px;
font-size:30px;
transition:.5s;
text-decoration:none;
}
/* ボタンマウスホバー時のテキスト指定 */
.flowbtn2:hover{
color:#fff!important;
}
/* Twitter */
.flowbtn2.fl_tw2{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn2.fl_tw2:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Google+ */
.flowbtn2.fl_go2{
border:solid 1px #ff3333;
color:#ff3333;	
}
/* Google+マウスホバー時 */
.flowbtn2.fl_go2:hover{
border:solid 1px #ff3333;
background:#ff3333;
}
/* Facebook */
.flowbtn2.fl_fb2{
border:solid 1px #3b5998;
color:#3b5998;
}
/* Facebookマウスホバー時 */
.flowbtn2.fl_fb2:hover{
border:solid 1px #3b5998;
background:#3b5998;
}
/* はてブ */
.flowbtn2.fl_hb2{
border:solid 1px #1ba5dc;
color:#1ba5dc;
}
/* はてブマウスホバー時 */
.flowbtn2.fl_hb2:hover{
border:solid 1px #1ba5dc;
background:#1ba5dc;
}
/* Pocket */
.flowbtn2.fl_pk2{
border:solid 1px #ef3f56;
color:#ef3f56;
}
/* Pocketマウスホバー時 */
.flowbtn2.fl_pk2:hover{
border:solid 1px #ef3f56;
background:#ef3f56;
}
/* Feedly */
.flowbtn2.fl_fd2{
border:solid 1px #6cc655;
color:#6cc655;
}
/* Feedlyマウスホバー時 */
.flowbtn2.fl_fd2:hover{
border:solid 1px #6cc655;
background:#6cc655;
}
/* YouTube */
.flowbtn2.fl_yu2{
border:solid 1px #fc0d1c;
color:#fc0d1c;
}
/* YouTubeマウスホバー時 */
.flowbtn2.fl_yu2:hover{
border:solid 1px #fc0d1c;
background:#fc0d1c;
}
/* LINE */
.flowbtn2.fl_li2{
border:solid 1px #00c300;
color:#00c300;
}
/* LINEマウスホバー時 */
.flowbtn2.fl_li2:hover{
border:solid 1px #00c300;
background:#00c300;
}
/* Instagram */
.flowbtn2.insta_btn2 {
border:solid 1px #c6529a;
color:#c6529a;
}
/* Instagramマウスホバー時 */
.flowbtn2.insta_btn2:hover{
border:solid 1px #c6529a;
background:#c6529a;
}
/* ボタン内テキスト調整 */
.flowbtn2 div{
font-size:11px;	
font-weight:bold;
letter-spacing:0.4px;	
position:relative;
bottom:10px;
}
/* ボタンの位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
padding-right:16px;
}
/* ボタン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center;
}
HTML
<ul class="snsbtniti">
<li><a  href="TwitterのプロフィールURL" class="flowbtn2 fl_tw2"
><i class="fab fa-twitter"></i>
<div>Twitter</div></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn2 fl_go2"><i class="fab fa-google-plus-g"></i>
<div>Google+</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn2 fl_fd2"><i class="icon-feedly"></i>
<div>Feedly</div></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn2 fl_pk2"><i class="fab fa-get-pocket"></i>
<div>Pocket</div></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn2 insta_btn2"><i class="fab fa-instagram"></i>
<div>Instagram</div></a></li>
<li><a href="FacebookページのURL" class="flowbtn2 fl_fb2"><i class="fab fa-facebook-f"></i>
<div>Facebook</div></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn2  fl_hb2"><i class="icon-hatena"></i>
<div>Hatena</div></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn2 fl_yu2"><i class="fab fa-youtube"></i>
<div>YouTube</div></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn2 fl_li2"><i class="icon-line"></i>
<div>LINE@</div></a></li>
</ul>

SNSボタンCSSデザイン3【丸いベタ塗り】

マウスホバー時、ゆっくり上に浮き上がります。

SNSボタンカスタマイズ4
style.css
/* ボタン全体 */
.flowbtn3{
font-family:'Arial',sans-serif;
border-radius:50%;
position:relative;
display:inline-block;
width:70px;
height:70px;
font-size:30px;
color:#fff!important;
text-decoration:none;
box-shadow:0 1px 2px #999;
transition:.5s;
}
/* Twitter */
 .fl_tw3{
  background:#55acee;
}
/* Google+ */
.fl_go3 {
background:#ff3333;	
}
/* Feedly */
.fl_fd3{
background:#6cc655;
}
/* Pocket */
.fl_pk3{
background:#ef3f56;
}
/* Facebook */
.fl_fb3{
background:#3b5998;
}
/* はてブ */
.fl_hb3{
background:#1ba5dc;
}
/* YouTube */
.fl_yu3{
background:#fc0d1c;
}
/* [email protected] */
.fl_li3{
background:#00c300;
}
/* Instagram紫グラデ背景 */
.insta_btn3{
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
overflow:hidden;
}
/* Instagramオレンジグラデ背景 */
.insta_btn3:before{
content: '';
position:absolute;
top:33px;
left:6px;
width:45px;
height:35px;
background:-webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}
/* ボタン内のテキスト */
.flowbtn3 div{
font-size:11px;	
font-weight:bold;
letter-spacing:0.4px;	
position:relative;
bottom:10px;
}
/* ボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
padding-right:16px;
}
/* ボタン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center;
}
/* ボタンにマウスホバー時 */
.flowbtn3:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
}
HTML
<ul class="snsbtniti">
<li><a  href="TwitterのプロフィールURL" class="flowbtn3 fl_tw3"
><i class="fab fa-twitter"></i>
<div>Twitter</div></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn3 fl_go3"><i class="fab fa-google-plus-g"></i>
<div>Google+</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn3 fl_fd3"><i class="icon-feedly"></i>
<div>Feedly</div></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn3 fl_pk3"><i class="fab fa-get-pocket"></i>
<div>Pocket</div></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn3 insta_btn3"><i class="fab fa-instagram"></i>
<div>Instagram</div></a></li>
<li><a href="FacebookページのURL" class="flowbtn3 fl_fb3"><i class="fab fa-facebook-f"></i>
<div>Facebook</div></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn3  fl_hb3"><i class="icon-hatena"></i>
<div>Hatena</div></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn3 fl_yu3"><i class="fab fa-youtube"></i>
<div>YouTube</div></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn3 fl_li3"><i class="icon-line"></i>
<div>LINE@</div></a></li>
</ul>

SNSボタンCSSデザイン4【丸い枠線】

マウスホバー時、ベタ塗りボタンに変わる。

SNSボタンカスタマイズ5
style.css
/* ボタン全体の装飾 */
.flowbtn4{
font-family:'Arial',sans-serif;
border-radius:50%;
display:inline-block;
width:70px;
height:70px;
font-size:30px;
transition:.5s;
text-decoration:none;
}
/* ボタンマウスホバー時テキストカラー */
.flowbtn4:hover{
color:#fff!important;
}
/* Twitter */
.flowbtn4.fl_tw4{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn4.fl_tw4:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Google+ */
.flowbtn4.fl_go4{
border:solid 1px #ff3333;
color:#ff3333;	
}
/* Google+マウスホバー時 */
.flowbtn4.fl_go4:hover{
border:solid 1px #ff3333;
background:#ff3333;
}
/* Facebook */
.flowbtn4.fl_fb4{
border:solid 1px #3b5998;
color:#3b5998;
}
/* Facebookマウスホバー時 */
.flowbtn4.fl_fb4:hover{
border:solid 1px #3b5998;
background:#3b5998;
}
/* はてブ */
.flowbtn4.fl_hb4{
border:solid 1px #1ba5dc;
color:#1ba5dc;
}
/* はてブマウスホバー時 */
.flowbtn4.fl_hb4:hover{
border:solid 1px #1ba5dc;
background:#1ba5dc;
}
/* Pocket */
.flowbtn4.fl_pk4{
border:solid 1px #ef3f56;
color:#ef3f56;
}
/* Pocketマウスホバー時 */
.flowbtn4.fl_pk4:hover{
border:solid 1px #ef3f56;
background:#ef3f56;
}
/* Feedly */
.flowbtn4.fl_fd4{
border:solid 1px #6cc655;
color:#6cc655;
}
/* Feedlyマウスホバー時 */
.flowbtn4.fl_fd4:hover{
border:solid 1px #6cc655;
background:#6cc655;
}
/* YouTube */
.flowbtn4.fl_yu4{
border:solid 1px #fc0d1c;
color:#fc0d1c;
}
/* YouTubeマウスホバー時 */
.flowbtn4.fl_yu4:hover{
border:solid 1px #fc0d1c;
background:#fc0d1c;
}
/* LINE */
.flowbtn4.fl_li4{
border:solid 1px #00c300;
color:#00c300;
}
/* LINEマウスホバー時 */
.flowbtn4.fl_li4:hover{
border:solid 1px #00c300;
background:#00c300;
}
/* Instagram */
.flowbtn4.insta_btn4 {
border:solid 1px #c6529a;
color:#c6529a;
}
/* Instagramマウスホバー時 */
.flowbtn4.insta_btn4:hover{
border:solid 1px #c6529a;
background:#c6529a;
}
/* ボタン内テキスト調整 */
.flowbtn4 div{
font-size:11px;	
font-weight:bold;
letter-spacing:0.4px;	
position:relative;
bottom:8px;	
}
/* ボタンの位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
padding-right:16px;
}
/* ボタン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center;
}
HTML
<ul class="snsbtniti">
<li><a  href="TwitterのプロフィールURL" class="flowbtn4 fl_tw4"
><i class="fab fa-twitter"></i>
<div>Twitter</div></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn4 fl_go4"><i class="fab fa-google-plus-g"></i>
<div>Google+</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn4 fl_fd4"><i class="icon-feedly"></i>
<div>Feedly</div></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn4 fl_pk4"><i class="fab fa-get-pocket"></i>
<div>Pocket</div></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn4 insta_btn4"><i class="fab fa-instagram"></i>
<div>Instagram</div></a></li>
<li><a href="FacebookページのURL" class="flowbtn4 fl_fb4"><i class="fab fa-facebook-f"></i>
<div>Facebook</div></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn4  fl_hb4"><i class="icon-hatena"></i>
<div>Hatena</div></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn4 fl_yu4"><i class="fab fa-youtube"></i>
<div>YouTube</div></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn4 fl_li4"><i class="icon-line"></i>
<div>LINE@</div></a></li>
</ul>

SNSボタンCSSデザイン5【ボタン下にテキスト表示】

マウスホバー時、ゆっくり上に浮き上がります。

SNSボタンカスタマイズ6
style.css
/* ボタン全体 */
.flowbtn5{
font-family:'Arial',sans-serif;	
border-radius: 13px;
padding-top:3px;		
position:relative;
display:inline-block;
width:59px;
height:55px;
font-size:33px;
color:#fff!important;
transition:.5s;
text-decoration:none;
}
/* Twitter */
.fl_tw5{
background:#55acee;
}
/* Google+ */
.fl_go5{
background:#ff3333;
}
/* Facebook */
.fl_fb5{
background:#3b5998;
}
/* はてブ */
.fl_hb5{
background:#1ba5dc;
}
/* はてブアイコン位置調整 */
.fl_hb5 .icon-hatena{
position:relative;
top:2px;
font-size:32px;			
}
/* Pocket */
.fl_pk5{
background:#ef3f56;
}
/* Feedly */
.fl_fd5{
background:#6cc655;
}
/* Feedlyアイコン位置調整 */
.fl_fd5 .icon-feedly{
position:relative;
top:2px;
font-size:36px;		
}
/* YouTube */
.fl_yu5 {
background:#fc0d1c;
}
/* LINE */
.fl_li5{
background:#00c300;
}
/* LINEアイコン位置調整 */
.fl_li5 .icon-line{
position:relative;
top:5px;	
font-size:37px;		
}
/* Instagram紫グラデ背景色 */
.insta_btn5 {
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;		
}
/* Instagramオレンジグラデ背景色 */
.insta_btn5:before{
content: '';
position:absolute;
top:25px;
left:-1px;
width:50px;
height:31px;
background:-webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}
/* Instagramアイコン調整 */
.insta_btn5 .fa-instagram{
font-size:40px;
position:relative;
top:3px;
z-index:1;	
}
/* アイコンボタン下テキスト調整 */
.flowbtn5 div{
font-size:11px;
font-weight:bold;
letter-spacing:0.4px;
color:#666;	
padding-top:2px;	
}
/* アイコンボタンにマウスホバーした時の指定*/
.flowbtn5:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
}
/* アイコンボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
padding-right:16px;
}
/* アイコンボタン同士の余白調整 */
.snsbtniti li{
flex:0 0 33%;
text-align:center;
}
HTML
<ul class="snsbtniti">
<li><a  href="TwitterのプロフィールURL" class="flowbtn5 fl_tw5"
><i class="fab fa-twitter"></i>
<div>Twitter</div></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn5 fl_go5"><i class="fab fa-google-plus-g"></i>
<div>Google+</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn5 fl_fd5"><i class="icon-feedly"></i>
<div>Feedly</div></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn5 fl_pk5"><i class="fab fa-get-pocket"></i>
<div>Pocket</div></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn5 insta_btn5"><i class="fab fa-instagram"></i>
<div>Instagram</div></a></li>
<li><a href="FacebookページのURL" class="flowbtn5 fl_fb5"><i class="fab fa-facebook-f"></i>
<div>Facebook</div></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn5 fl_hb5"><i class="icon-hatena"></i>
<div>Hatena</div></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn5 fl_yu5"><i class="fab fa-youtube"></i>
<div>YouTube</div></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn5 fl_li5"><i class="icon-line"></i>
<div>LINE@</div></a></li>
</ul>

SNSボタンCSSデザイン6【アプリアイコン風】

マウスホバー時、ゆっくり上に浮き上がります。

SNSボタンカスタマイズ7

/* ボタン全体 */margin-bottom:14px;でボタン下に余白を開けているので、設置する場所によって調整してください。

style.css
/* ボタン全体 */
.flowbtn6{
font-family:'Arial',sans-serif;
border-radius:12px;
position:relative;
display:inline-block;
width:56px;
height:55px;
font-size:35px;
color:#fff!important;
text-decoration:none;
transition:.5s;
margin-bottom:14px;		
}
/* Twitter */
.fl_tw6{
background:#55acee;
}
/* Google+ */
.fl_go6{
background:#fff;	
color:#d9453d!important;
box-shadow:0 0 2px #888;
font-size:40px;
line-height:55px;	
}
/* Feedly */
.fl_fd6{
background:#33b151;
font-size:39px;	
line-height:58px;		
}
/* Pocket */
.fl_pk6{
color:#ef3f56!important;	
background:#fff;	
box-shadow:0 0 2px #888;	
font-size:38px;
line-height:56px;	
border-bottom:2px solid #ef3f56;	
}
/* Facebookアイコン位置 */
.fl_fb6 .fa-facebook-f{
position:relative;
top:10px;
left:8px;	
font-size:46px;
}
/* Facebookアイコン背景*/
.fl_fb6{
background:-webkit-linear-gradient(top, #5c80c6 0%, #34528c 74%);	
background:linear-gradient(to bottom, #5c80c6 0%, #34528c 74%);	
}
/* はてブ */
.fl_hb6 {
background:-webkit-linear-gradient(top, #1fbccd 0%, #1c91d4 84%);	
background:linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%);		
font-size:33px;
line-height:59px;	
}
/* YouTube */
.fl_yu6 {
background:#fff;
color:#fc0d1c!important;
box-shadow:0 0 2px #888;
line-height:55px;	
}
/* [email protected] */
.fl_li6{
background:#00c300;			
}
/* Instagramアイコン位置 */
.insta_btn6 .fa-instagram{
font-size:45px;	
line-height:56px;
z-index:1;
position:relative;
}
/* Instagram紫グラデ背景 */
.insta_btn6 {
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
overflow:hidden;	
}
/* Instagramオレンジグラデ背景 */
.insta_btn6:before{
content: '';
position: absolute;
top:27px;
left:-12px;
width:59px;
height:40px;
background:-webkit-radial-gradient(#ffdb2c 7%, rgba(255, 105, 34, 0.3) 60%, rgba(255, 88, 96, 0) 70%);
background:radial-gradient(#ffdb2c 7%, rgba(255, 105, 34, 0.3) 60%, rgba(255, 88, 96, 0) 70%);
}
/* アイコンボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
padding-right:16px;
}
/* アイコンボタン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center;
}
/* アイコンボタンにマウスを乗せた時 */
.flowbtn6:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
}
HTML
<ul class="snsbtniti">
<li><a  href="TwitterのプロフィールURL" class="flowbtn6 fl_tw6"
><i class="fab fa-twitter"></i>
</a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn6 fl_go6"><i class="fab fa-google-plus"></i>
</a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn6 fl_fd6"><i class="icon-feedly"></i>
</a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn6 fl_pk6"><i class="fab fa-get-pocket"></i>
</a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn6 insta_btn6"><i class="fab fa-instagram"></i>
</a></li>
<li><a href="FacebookページのURL" class="flowbtn6 fl_fb6"><i class="fab fa-facebook-f"></i>
</a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn6 fl_hb6"><i class="icon-hatena"></i>
</a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn6 fl_yu6"><i class="fab fa-youtube"></i>
</a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn6 fl_li6"><i class="fas fa-at"></i>
</a></li>
</ul>

SNSボタンCSSデザイン7【丸ボタンのみ】

マウスホバー時、ゆっくり上に浮き上がります。

SNSボタンカスタマイズ8

/* ボタン全体 */margin-bottom:14px;でボタン下に余白を開けているので、設置する場所によって調整してください。

style.css
/* ボタン全体 */
.flowbtn7{
font-family:'Arial',sans-serif;
border-radius:50%;
position:relative;
display:inline-block;
width:56px;
height:55px;
font-size:34px;
line-height:58px;	
color: #fff!important;
text-decoration:none;
transition:.5s;
margin-bottom:14px;	
box-shadow:0 0 2px #888;		
}
/* Twitter */
.fl_tw7{
background:#55acee;
}
/* Google+ */
.fl_go7{
background:#d9453d;	
font-size:33px;	
line-height:55px;			
}
/* Feedly */
.fl_fd7{
background:#6cc655;
font-size:39px;	
line-height:60px;		
}
/* Pocket */
.fl_pk7{
background:#ef3f56;	
}
/* Facebookアイコン背景*/
.fl_fb7{
background:#3b5998;
}
/* はてブ */
.fl_hb7{
background:#1ba5dc;
font-size:33px;
line-height:61px;	
}
/* YouTube */
.fl_yu7{
background:#fc0d1c;
font-size:33px;
line-height:55px;		
}
/* [email protected] */
.fl_li7{
background:#00c300;
font-size:38px;
line-height:65px;		
}
/* Instagramアイコン位置 */
.insta_btn7 .fa-instagram{
font-size:40px;	
line-height:56px;
z-index:1;
position:relative;
left:0.6px;
bottom:0.4px;	
}
/* Instagram紫グラデ背景 */
.insta_btn7{
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
overflow:hidden;	
}
/* Instagramオレンジグラデ背景 */
.insta_btn7:before{
content: '';
position:absolute;
top:27px;
left:-12px;
width:65px;
height:36px;
background:-webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}
/* ボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
padding-right:16px;	
}
/* ボタン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center;
}
/* ボタンにマウスを乗せた時 */
.flowbtn7:hover{
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
HTML
<ul class="snsbtniti">
<li><a  href="TwitterのプロフィールURL" class="flowbtn7 fl_tw7"
><i class="fab fa-twitter"></i>
</a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn7 fl_go7"><i class="fab fa-google-plus-g"></i>
</a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn7 fl_fd7"><i class="icon-feedly"></i>
</a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn7 fl_pk7"><i class="fab fa-get-pocket"></i>
</a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn7 insta_btn7"><i class="fab fa-instagram"></i>
</a></li>
<li><a href="FacebookページのURL" class="flowbtn7 fl_fb7"><i class="fab fa-facebook-f"></i>
</a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn7 fl_hb7"><i class="icon-hatena"></i>
</a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn7 fl_yu7"><i class="fab fa-youtube"></i>
</a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn7 fl_li7"><i class="icon-line"></i>
</a></li>
</ul>

SNSボタンCSSデザイン8【丸い枠線ボタンのみ】

マウスホバー時、ベタ塗りボタンに変わる。

SNSボタンカスタマイズ9

/* ボタン全体 */margin-bottom:14px;でボタン下に余白を開けているので、設置する場所によって調整してください。

style.css
/* ボタン全体 */
.flowbtn8{
font-family:'Arial',sans-serif;
border-radius:50%;
position:relative;
display:inline-block;
width:56px;
height:55px;
font-size:32px;
line-height:55px;
text-decoration:none;
transition:.5s;
margin-bottom:14px;
}
/* ボタンマウスホバー時のテキスト指定 */
.flowbtn8:hover{
color:#fff!important;
}
/* Twitter */
.flowbtn8.fl_tw8{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn8.fl_tw8:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Google+ */
.flowbtn8.fl_go8{
border:solid 1px #ff3333;
color:#ff3333;
font-size:35px;
}
/* Google+マウスホバー時 */
.flowbtn8.fl_go8:hover{
border:solid 1px #ff3333;
background:#ff3333;
}
/* Facebook */
.flowbtn8.fl_fb8{
border:solid 1px #3b5998;
color:#3b5998;
}
/* Facebookマウスホバー時 */
.flowbtn8.fl_fb8:hover{
border:solid 1px #3b5998;
background:#3b5998;
}
/* はてブ */
.flowbtn8.fl_hb8{
border:solid 1px #1ba5dc;
color:#1ba5dc;
font-size:29px;
line-height:58px;
}
/* はてブマウスホバー時 */
.flowbtn8.fl_hb8:hover{
border:solid 1px #1ba5dc;
background:#1ba5dc;
}
/* Pocket */
.flowbtn8.fl_pk8{
border:solid 1px #ef3f56;
color:#ef3f56;
}
/* Pocketマウスホバー時 */
.flowbtn8.fl_pk8:hover{
border:solid 1px #ef3f56;
background:#ef3f56;
}
/* Feedly */
.flowbtn8.fl_fd8{
border:solid 1px #6cc655;
color:#6cc655;
font-size:35px;
line-height:58px;	
}
/* Feedlyマウスホバー時 */
.flowbtn8.fl_fd8:hover{
border:solid 1px #6cc655;
background:#6cc655;
}
/* YouTube */
.flowbtn8.fl_yu8{
border:solid 1px #fc0d1c;
color:#fc0d1c;
font-size:31px;	
}
/* YouTubeマウスホバー時 */
.flowbtn8.fl_yu8:hover{
border:solid 1px #fc0d1c;
background:#fc0d1c;
}
/* LINE */
.flowbtn8.fl_li8{
border:solid 1px #00c300;
color:#00c300;
font-size:35px;
line-height:61px;		
}
/* LINEマウスホバー時 */
.flowbtn8.fl_li8:hover{
border:solid 1px #00c300;
background:#00c300;
}
/* Instagram */
.flowbtn8.insta_btn8 {
border:solid 1px #c6529a;
color:#c6529a;
}
/* Instagramマウスホバー時 */
.flowbtn8.insta_btn8:hover{
border:solid 1px #c6529a;
background:#c6529a;
}
/* ボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
padding-right:16px;	
}
/* ボタン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center;
}
/* ボタンにマウスを乗せた時 */
.flowbtn8:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
}
HTML
<ul class="snsbtniti">
<li><a  href="TwitterのプロフィールURL" class="flowbtn8 fl_tw8"
><i class="fab fa-twitter"></i>
</a></li>
<li><a href="Google+のプロフィールURL" class="flowbtn8 fl_go8"><i class="fab fa-google-plus"></i>
</a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn8 fl_fd8"><i class="icon-feedly"></i>
</a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn8 fl_pk8"><i class="fab fa-get-pocket"></i>
</a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn8 insta_btn8"><i class="fab fa-instagram"></i>
</a></li>
<li><a href="FacebookページのURL" class="flowbtn8 fl_fb8"><i class="fab fa-facebook-f"></i>
</a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn8 fl_hb8"><i class="icon-hatena"></i>
</a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn8 fl_yu8"><i class="fab fa-youtube"></i>
</a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn8 fl_li8"><i class="icon-line"></i>
</a></li>
</ul>

SNSボタンCSSデザイン9【アイコンフォントのみ】

マウスホバー時、ゆっくり上に浮き上がります。

コードが短くて済みますね。アイコンサイズも小さくなるのでスマホ表示でも5〜6個並べても綺麗に収まります。

バランスが悪かったので、メールアイコンに「お問い合わせページのURL」を追加してます。

SNSボタンカスタマイズ10
style.css
/* ボタン全体 */
.flowbtn9{
display:inline-block;	
font-size:40px;
text-decoration:none;
transition:.5s;
}
/* Twitter */
.flowbtn9 .fa-twitter-square{
color:#55acee;
}
/* Google+ */
.flowbtn9 .fa-google-plus-square {
color:#d9453d;
}
/* Feedly */
.flowbtn9 .fa-rss-square{
color:#6cc655;
}
/* Pocket */
.flowbtn9 .fa-get-pocket{
color:#ef3f56;
}
/* Facebook*/
.flowbtn9 .fa-facebook-square{
color:#3b5998;
}
/* はてブ */
.flowbtn9 .icon-hatena {
color:#1ba5dc;	
line-height:69px;
}
/* YouTube */
.flowbtn9 .fa-youtube-square{
color:#fc0d1c;
}
/* [email protected] */
.flowbtn9 .fa-line{
color:#00c300;
}
/* Instagram */
.flowbtn9 .fa-instagram{
color:#c6529a;
}
/* お問い合わせメール */
.flowbtn9 .fa-envelope-square{
color:#f3981d;	
}
/* アイコン全体の位置 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
}
/* アイコン同士の余白 */
.snsbtniti2 li{
flex:0 0 19%;
text-align:center;
}
/* アイコンにマウスを乗せた時 */
.flowbtn9:hover{
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}
HTML
<ul class="snsbtniti2">
<li><a  href="TwitterのプロフィールURL" class="flowbtn9"
><i class="fab fa-twitter-square"></i></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn9"><i class="fab fa-google-plus-square"></i>
</a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn9"><i class="fas fa-rss-square"></i>
</a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn9"><i class="fab fa-get-pocket"></i>
</a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn9"><i class="fab fa-instagram "></i>
</a></li>
<li><a href="FacebookページのURL" class="flowbtn9"><i class="fab fa-facebook-square"></i>
</a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn9"><i class="icon-hatena"></i>
</a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn9"><i class="fab fa-youtube-square"></i>
</a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn9"><i class="fab fa-line"></i>
</a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn9"><i class="fas fa-envelope-square"></i></a></li>
</ul>

SNSボタンCSSデザイン10【モノクロ風アイコン】

マウスホバー時、それぞれアイコンカラーに変わります。

SNSボタンカスタマイズ11
style.css
/* ボタン全体 */
.flowbtn10{
display: inline-block;	
font-size: 40px;
text-decoration:none;
transition:.5s;
color:#666;	
}
/* Twitterアイコン調整 */
.flowbtn10 .fa-twitter{
font-size:37px;
position:relative;
bottom:1px;	
}
/* Twitterマウスホバー時 */
.flowbtn10 .fa-twitter:hover{
color:#55acee;
}
/* Google+マウスホバー時 */
.flowbtn10 .fa-google-plus:hover{
color:#d9453d;
}
/* Feedlyアイコン調整 */
.flowbtn10 .icon-feedly{
font-size:44px;
position:relative;
top:3px;		
}
/* Feedlyマウスホバー時 */
.flowbtn10 .icon-feedly:hover{
color:#6cc655;
}
/* Pocketマウスホバー時 */
.flowbtn10 .fa-get-pocket:hover{
color:#ef3f56;
}
/* Facebookアイコン調整 */
.flowbtn10 .fa-facebook-f{
font-size:35px;	
position:relative;
bottom:5px;	
}
/* Facebookマウスホバー時 */
.flowbtn10 .fa-facebook-f:hover{
color:#3b5998;
}
/* はてブアイコン調整 */
.flowbtn10 .icon-hatena{
font-size:38px;
}
/* はてブマウスホバー時 */
.flowbtn10 .icon-hatena:hover{
color:#1ba5dc;	
}
/* YouTubeアイコン調整 */
.flowbtn10 .fa-youtube{
font-size:37px;
position:relative;
bottom:2px;		
}
/* YouTubeマウスホバー時 */
.flowbtn10 .fa-youtube:hover{
color:#fc0d1c;
}
/* LINEアイコン調整 */
.flowbtn6 .icon-line{
font-size:42px;
position:relative;
top:3px;	
}
/* LINEマウスホバー時 */
.flowbtn10 .icon-line:hover{
color:#00c300;
}
/* Instagramマウスホバー時 */
.flowbtn10 .fa-instagram:hover{
color:#c6529a;
}
/* メールアイコン調整 */
.flowbtn10 .fa-envelope{
font-size:37px;
position:relative;
bottom:2px;			
}
/* メールアイコンマウスホバー時 */
.flowbtn10 .fa-envelope:hover{
color:#f3981d;	
}
/* アイコン全体の位置 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
padding-right:16px;	
}
/* アイコン同士の余白 */
.snsbtniti2 li{
flex:0 0 19%;
text-align:center;
}
HTML
<ul class="snsbtniti2">
<li><a  href="TwitterのプロフィールURL" class="flowbtn10"
><i class="fab fa-twitter"></i></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn10"><i class="fab fa-google-plus"></i>
</a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn10"><i class="icon-feedly"></i>
</a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn10"><i class="fab fa-get-pocket"></i>
</a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn10"><i class="fab fa-instagram"></i>
</a></li>
<li><a href="FacebookページのURL" class="flowbtn10"><i class="fab fa-facebook-f"></i>
</a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn10"><i class="icon-hatena"></i>
</a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn10"><i class="fab fa-youtube"></i>
</a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn10"><i class="icon-line"></i>
</a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn10"><i class="far fa-envelope"></i></a></li>
</ul>

SNSボタンCSSデザイン11【横長ベタ塗り】

マウスホバー時、テキストが360℃回転します。(こちらもお問い合わせ用のメールボタンを追加してます。

PCの記事幅で見ると、ボタンが横に広すぎてブサイクですが、ボタンの幅は設置場所によって自動調整されるので、サイドバーやフッターに貼り付ければちょうど良いサイズになります。

SNSボタンカスタマイズ12
style.css
/* ボタン全体 */
.flowbtn11{
font-family:'Arial',sans-serif;	
border-radius:4px;
position:relative;
display:inline-block;
width:100%;
height:40px;
font-size:20px;
color:#fff!important;
padding-top:4px;
text-align:center;
box-shadow:0 1px 2px #999;
text-decoration:none;
}
/* Twitter */
.fl_tw11{
background:#55acee;
}
/* Google+ */
.fl_go11{
background:#ff3333;	
}
/* Facebook */
.fl_fb11{
background:#3b5998;
}
/* はてブ */
.fl_hb11{
background:#1ba5dc;
}
/* Pocket */
.fl_pk11{
background:#ef3f56;
}
/* Feedly */
.fl_fd11{
background:#6cc655;
}
/* YouTube */
.fl_yu11{
background:#fc0d1c;
}
/* LINE */
.fl_li11{
background:#00c300;
}
/* お問い合わせメール */
.fl_ml11{
background:#f3981d;
}
/* Instagramアイコン位置 */
.insta_btn11 .fa-instagram{
position:relative;
z-index:1;	
}
/* Instagram紫グラデ背景色 */
.insta_btn11{
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
overflow:hidden;
}
/* Instagramオレンジグラデ背景色 */
.insta_btn11:before{
content: '';
position:absolute;
top:17px;
left:-75px;
width:100%;
height:100%;
background:-webkit-radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 45%, rgba(255, 88, 96, 0) 80%);
background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 80%);
}
/* アイコンボタンホバー時 */
.flowbtn11:hover span{
-webkit-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
transform: rotateX(360deg);
}
/* ボタン内テキスト調整 */
.flowbtn11 span{
font-size:14px;	
position:relative;
left:8px;
bottom:2px;
transition:.6s;	
display:inline-block;		
}
/* アイコンボタンの位置調整 */
.snsbtniti3{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
padding-right:16px;
}
/* アイコンボタン同士の余白調整 */
.snsbtniti3 li{
flex:0 0 48%;
text-align:center;
}
HTML
<ul class="snsbtniti3">
<li><a  href="TwitterのプロフィールURL" class="flowbtn11 fl_tw11"
><i class="fab fa-twitter"></i>
<span>Twitter</span></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn11 fl_go11"><i class="fab fa-google-plus-g"></i>
<span>Google+</span></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn11 fl_fd11"><i class="icon-feedly"></i>
<span>Feedly</span></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn11 fl_pk11"><i class="fab fa-get-pocket"></i>
<span>Pocket</span></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn11 insta_btn11"><i class="fab fa-instagram"></i>
<span>Instagram</span></a></li>
<li><a href="FacebookページのURL" class="flowbtn11 fl_fb11"><i class="fab fa-facebook-f"></i>
<span>Facebook</span></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn11 fl_hb11"><i class="icon-hatena"></i>
<span>Hatena</span></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn11 fl_yu11"><i class="fab fa-youtube"></i>
<span>YouTube</span></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn11 fl_li11"><i class="icon-line"></i>
<span>LINE@</span></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn11 fl_ml11"><i class="far fa-envelope"></i>
<span>Email</span></a></li>
</ul>

SNSボタンCSSデザイン12【横長の枠線】

マウスホバー時、ベタ塗りボタンに変わます。

SNSボタンカスタマイズ13
style.css
/* ボタン全体 */
.flowbtn12{
font-family:'Arial',sans-serif;	
border-radius: 4px;
display:inline-block;
width:100%;
height:40px;
font-size:20px;
padding-top:4px;
text-align:center;
transition:.4s;	
}
/* ボタン内テキストマウスホバー時 */
.flowbtn12:hover{
color:#fff!important;
}
/* Twitter */
.flowbtn12.fl_tw12{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn12.fl_tw12:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Google+ */
.flowbtn12.fl_go12{
border:solid 1px #ff3333;
color:#ff3333;
}
/* Google+マウスホバー時 */
.flowbtn12.fl_go12:hover{
border:solid 1px #ff3333;
background:#ff3333;
}
/* Facebook */
.flowbtn12.fl_fb12{
border:solid 1px #3b5998;
color:#3b5998;
}
/* Facebookマウスホバー時 */
.flowbtn12.fl_fb12:hover{
border:solid 1px #3b5998;
background:#3b5998;
}
/* はてブ */
.flowbtn2.fl_hb2{
border:solid 1px #1ba5dc;
color:#1ba5dc;
}
/* はてブマウスホバー時 */
.flowbtn12.fl_hb12:hover{
border:solid 1px #1ba5dc;
background:#1ba5dc;
}
/* Pocket */
.flowbtn12.fl_pk12{
border:solid 1px #ef3f56;
color:#ef3f56;
}
/* Pocketマウスホバー時 */
.flowbtn12.fl_pk12:hover{
border:solid 1px #ef3f56;
background:#ef3f56;
}
/* Feedly */
.flowbtn12.fl_fd12{
border:solid 1px #6cc655;
color:#6cc655;
}
/* Feedlyマウスホバー時 */
.flowbtn12.fl_fd12:hover{
border:solid 1px #6cc655;
background:#6cc655;
}
/* YouTube */
.flowbtn12.fl_yu12{
border:solid 1px #fc0d1c;
color:#fc0d1c;
}
/* YouTubeマウスホバー時 */
.flowbtn12.fl_yu12:hover{
border:solid 1px #fc0d1c;
background:#fc0d1c;
}
/* LINE */
.flowbtn12.fl_li12{
border:solid 1px #00c300;
color:#00c300;
}
/* LINEマウスホバー時 */
.flowbtn12.fl_li12:hover{
border:solid 1px #00c300;
background:#00c300;
}
/* Instagram */
.flowbtn12.insta_btn12{
border:solid 1px #c6529a;
color:#c6529a;
}
/* Instagramマウスホバー時 */
.flowbtn12.insta_btn12:hover{
border:solid 1px #c6529a;
background:#c6529a;
}
/* メールアイコン */
.flowbtn12.fl_ml12{
border:solid 1px #f3981d;
color:#f3981d;
}
/* メールアイコンマウスホバー時 */
.flowbtn12.fl_ml12:hover{
border:solid 1px #f3981d;
background:#f3981d;
}
/* ボタン内テキスト調整 */
.flowbtn12 span{
font-size:14px;	
position:relative;
left:8px;
bottom:2px;	
}
/* ボタン全体の位置 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
padding-right:16px;	
}
/* ボタン同士の余白 */
.snsbtniti2 li{
flex:0 0 48%;
text-align:center;
}
HTML
<ul class="snsbtniti3">
<li><a  href="TwitterのプロフィールURL" class="flowbtn12 fl_tw12"
><i class="fab fa-twitter"></i>
<span>Twitter</span></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn12 fl_go12"><i class="fab fa-google-plus-g"></i>
<span>Google+</span></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn12 fl_fd12"><i class="icon-feedly"></i>
<span>Feedly</span></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn12 fl_pk12"><i class="fab fa-get-pocket"></i>
<span>Pocket</span></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn12 insta_btn12"><i class="fab fa-instagram"></i>
<span>Instagram</span></a></li>
<li><a href="FacebookページのURL" class="flowbtn12 fl_fb12"><i class="fab fa-facebook-f"></i>
<span>Facebook</span></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn12 fl_hb12"><i class="icon-hatena"></i>
<span>Hatena</span></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn12 fl_yu12"><i class="fab fa-youtube"></i>
<span>YouTube</span></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn12 fl_li12"><i class="icon-line"></i>
<span>LINE@</span></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn12 fl_ml12"><i class="far fa-envelope"></i>
<span>Email</span></a></li>
</ul>

SNSボタンCSSデザイン13【アイコン・テキスト・点線下線の組み合わせ】

マウスホバー時、テキストカラーが変わり、右側に伸びます。

SNSボタンカスタマイズ14

点線を消す場合は/* アイコン周り全体 */からborder-bottom:dotted 1px #bbb;を削除してください。

style.css
/* アイコン周り全体 */
.flowbtn13{
font-family:'Arial', sans-serif;	
display: inline-block;
width:100%;
font-size:30px;
text-align:left;
border-bottom:dotted 1px #bbb;	
}
/* Twitter */
.flowbtn13 .fa-twitter-square{
color:#55acee;
}
/* Twitterマウスホバー時 */
.fl_tw13:hover{
color:#55acee;
}
/* Google+ */
.flowbtn13 .fa-google-plus-square{
color:#ff3333;
}
/* Google+マウスホバー時 */
.fl_go13:hover{
color:#ff3333;	
}
/* Feedly */
.flowbtn13 .fa-rss-square{
color:#6cc655;
}
/* Feedlyマウスホバー時 */
.fl_fd13:hover{
color:#6cc655;	
}
/* Facebook */
.flowbtn13 .fa-facebook-square{
color:#3b5998;
}
/* Facebookマウスホバー時 */
.fl_fb13:hover{
color:#3b5998;	
}
/* はてブ */
.flowbtn13 .icon-hatena{
color:#1ba5dc;
position:relative;
top:1px;	
}
/* はてブマウスホバー時 */
.fl_hb13:hover{
color:#1ba5dc;	
}
/* Pocket */
.flowbtn13 .fa-get-pocket{
color:#ef3f56;
}
/* Pocketマウスホバー時 */
.fl_pk13:hover{
color:#ef3f56;	
}
/* LINE */
.flowbtn13 .fa-line{
color:#00c300;
}
/* LINEマウスホバー時 */
.fl_li13:hover{
color:#00c300;	
}
/* Instagram */
.flowbtn13 .fa-instagram{
color:#c6529a;
}
/* Instagramマウスホバー時 */
.insta_btn13:hover{
color:#c6529a;	
}
/* YouTube */
.flowbtn13 .fa-youtube-square{
color:#fc0d1c;
}
/* YouTubeマウスホバー時 */
.fl_yu13:hover{
color: #fc0d1c;	
}
/* メールアイコン */
.flowbtn13 .fa-envelope-square{
color:#f3981d;
}
/* メールアイコンマウスホバー時 */
.fl_ml13:hover{
color:#f3981d;	
}
/* テキスト調整 */
.flowbtn13 span{
font-size:16px;	
position:relative;
left:8px;
bottom:6px;	
color:#666;	
}
/* テキストマウスホバー時*/
.flowbtn13 span:hover{
 transition: .5s;
font-weight:bold;	
margin-left:5px;	
}
/* 全体の位置 */
.snsbtniti3{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
padding-right:16px;	
}
/* 要素同士の余白 */
.snsbtniti3 li{
flex:0 0 48%;
text-align:center;
}
HTML
<ul class="snsbtniti3">
<li><a  href="TwitterのプロフィールURL" class="flowbtn13"
><i class="fab fa-twitter-square"></i>
<span class="fl_tw13">Twitter</span></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn13 "><i class="fab fa-google-plus-square"></i>
<span class="fl_go13">Google+</span></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn13"><i class="fas fa-rss-square"></i>
<span class="fl_fd13">Feedly</span></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn13"><i class="fab fa-get-pocket"></i>
<span class="fl_pk13">Pocket</span></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn13 "><i class="fab fa-instagram"></i>
<span class="insta_btn13">Instagram</span></a></li>
<li><a href="FacebookページのURL" class="flowbtn13 "><i class="fab fa-facebook-square"></i>
<span class="fl_fb13">Facebook</span></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn13"><i class="icon-hatena"></i>
<span class="fl_hb13">Hatena</span></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn13 "><i class="fab fa-youtube-square"></i>
<span class="fl_yu13">YouTube</span></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn13"><i class="fab fa-line"></i>
<span class-"fl_li13">LINE@</span></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn13"><i class="fas fa-envelope-square"></i>
<span class="fl_ml13">Email</span></a></li>
</ul>

SNSボタンCSSデザイン14【付箋風】

マウスホバー時、アイコンとテキストのカラーが変わります。

SNSボタンカスタマイズ15
style.css
/* ボタン全体 */
.flowbtn2{
font-family:'Arial', sans-serif;	
display: inline-block;
width:100%;
height:40px;
font-size:23px;
text-align:left;
background:#f3f3f3;
border-radius:0 4px 4px 0; 
color:#666!important;
padding-top:2px;
}
/* マウスホバー時ゆっくりに */
.flowbtn2 :hover{
 transition:.5s;	
}
/* Twitter */
.flowbtn2.fl_tw2{
border-left:solid 5px #55acee;	
padding-left:8px;		
}
/* Twitterマウスホバー時 */
.fl_tw2 :hover{
color:#55acee;
}
/* Google+ */
.flowbtn2.fl_go2{
border-left:solid 5px #ff3333;
padding-left:8px;		
}
/* Google+マウスホバー時 */
.fl_go2 :hover{
color: #ff3333;	
}
/* Feedlyアイコン位置調整 */
.flowbtn2 .icon-feedly{
position:relative;
top:2px;	
}
/* Feedly */
.flowbtn2.fl_fd2{
border-left:solid 5px #6cc655;
padding-left:8px;			
}
/* Feedlyマウスホバー時 */
.fl_fd2 :hover{
color: #6cc655;	
}
/* Facebook */
.flowbtn2.fl_fb2{
border-left:solid 5px #3b5998;
padding-left:8px;				
}
/* Facebookマウスホバー時 */
.fl_fb2 :hover{
color: #3b5998;	
}
/* はてブアイコン調整 */
.flowbtn2 .icon-hatena{
position:relative;
top:2px;	
}
/* はてブ */
.flowbtn2.fl_hb2{
border-left:solid 5px #1ba5dc;
padding-left:8px;		
}
/* はてブマウスホバー時 */
.fl_hb2 :hover{
color: #1ba5dc;	
}
/* Pocket */
.flowbtn2.fl_pk2{
border-left:solid 5px #ef3f56;
padding-left:8px;			
}
/* Pocketマウスホバー時 */
.fl_pk2 :hover{
color: #ef3f56;	
}
/* LINEアイコン位置調整 */
.flowbtn2 .icon-line{
position:relative;
top:2px;	
}
/* LINE */
.flowbtn2.fl_li2{
border-left:solid 5px #00c300;
padding-left:8px;				
}
/* LINEマウスホバー時 */
.fl_li2 :hover{
color: #00c300;	
}
/* Instagram */
.flowbtn2.insta_btn2{
border-left:solid 5px #c6529a;
padding-left:8px;				
}
/* Instagramマウスホバー時 */
.insta_btn2 :hover{
color:#c6529a;	
}
/* YouTube */
.flowbtn2.fl_yu2{
border-left:solid 5px #fc0d1c;
padding-left:8px;				
}
/* YouTubeマウスホバー時 */
.fl_yu2 :hover{
color: #fc0d1c;	
}
/* メールアイコン */
.flowbtn2.fl_ml2{
border-left:solid 5px #f3981d;
padding-left:8px;				
}
/* メールアイコンマウスホバー時 */
.fl_ml2 :hover{
color:#f3981d;	
}
/* ボタン内テキスト調整 */
.flowbtn2 span{
font-size:16px;	
position: relative;
left:8px;
bottom:3px;	
}
/* ボタン全体の位置 */
.snsbtniti3{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
padding-right:16px;	
}
/* ボタン同士の余白 */
.snsbtniti3 li{
flex:0 0 48%;
text-align:center;
}
HTML
<ul class="snsbtniti3">
<li><a  href="TwitterのプロフィールURL" class="flowbtn14 fl_tw14"
><i class="fab fa-twitter"></i>
<span>Twitter</span></a></li>
<li><a href="Google+のプロフィールURL"class="flowbtn14 fl_go14"><i class="fab fa-google-plus"></i>
<span>Google+</span></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn14 fl_fd14"><i class="icon-feedly"></i>
<span>Feedly</span></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn14 fl_pk14"><i class="fab fa-get-pocket"></i>
<span>Pocket</span></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn14 insta_btn14"><i class="fab fa-instagram"></i>
<span>Instagram</span></a></li>
<li><a href="FacebookページのURL" class="flowbtn14 fl_fb14"><i class="fab fa-facebook-f"></i>
<span>Facebook</span></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn14 fl_hb14"><i class="icon-hatena"></i>
<span>Hatena</span></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn14 fl_yu14"><i class="fab fa-youtube"></i>
<span>YouTube</span></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn14 fl_li14"><i class="icon-line"></i>
<span>LINE@</span></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn14 fl_ml14"><i class="far fa-envelope"></i>
<span>Email</span></a></li>
</ul>

まとめ

フォローボタンの記事は以前から作ろうかなぁと思っていましたが、めちゃくちゃ時間かかるの分かってたのでスイッチが入った時にやろうと引き延ばしてたら今になりました。

私は作りながらコードが浮かんでくるタイプなので、あれもこれもとやっていたら13個出来たのですが、不吉な数字なので無理やり14個目を作りました。笑

HTML5 & CSS3 デザインレシピ集
★Amazonは現金チャージがお得★

チャージ額に応じてポイントが貯まります。

プライム会員」なら最大2.5%ポイント還元!!貯まったポイントは次回のお買い物から使えます。さらに、今なら初回購入1000ポイントキャンペーン中!!

※キャンペーン条件がやや複雑なので不安な方は下記の手順を確認してください

STEP1

キャンペーンページへ

Amazonギフトポイント付与キャンペーン

STEP2

エントリー完了後、「Amazonギフト券チャージタイプ」をクリック

Amazonギフトポイント付与キャンペーンエントリー

STEP3

キャンペーン条件の5000円以上を選択または自由金額を5000円以上に入力次へをクリック

Amazonギフトチャージタイプ購入

STEP4

Amazonギフトチャージタイプ支払い方法選択PC

「コンビニ・ATM・ネットバンキング払い・電子マネー払い」を選択次に進むをクリック


STEP5

注意×10

特に何もせず注文を確定するをクリック

Amazonギフトチャージタイプ購入PC

以下キャンペーン条件から外れてしまうトラップについて。

  • 支払い方法の「電子マネー」はNG
  • Amazonギフト券・Amazonショッピングカード・クーポンも使用できるようになっていますがNG
  • 2000円以上で200ポイントも初回特典ですが、チャージは対象外なのでこちらを選択すると本来1000ポイントもらえるのに200ポイントになってしまうのでNG

私はAmazonヘビーユーザーですが、このキャンペーンに関してはユーザーを欺くようなUX(導線)でよろしくないなと思いました。


STEP6

Amazonギフトチャージタイプ購入確認メール

Amazonに登録してるメールアドレスに「お支払い番号のお知らせ」メールが届きます。お支払い方法別の手順」のリンクをクリックしてください。


STEP7

Amazonギフトチャージタイプ支払い確定PC

もう一度言っておきますが、ここで「電子マネーでの支払い」を選択しないように注意してください。

それ以外の支払い方法をクリックすると詳細が載っているので、期限である6日以内に支払いを済ませて完了です。

以上がキャンペーンの手順です。注意点に気をつけながらぜひこの機会に1000ポイントGETしてください。

プライム会員」なら最大2.5%ポイント還元!!

※チャージした金額の有効期限は安心の10年間

ご質問・ご感想・受付中

「メールアドレス入力欄」を削除した為「返信通知」は届きません。
確実に返信が必要な場合は「お問い合わせ」または「TwitterのDM」よりご連絡ください。

他の方にも有益になると判断した質問やコメントは記事に引用させて頂く場合がありますのであらかじめご了承下さい。