漫画・小説・ビジネス書なんでも最大100冊分が半額

8種類のSNSフォローボタンのCSSカスタマイズ18選

SNSボタンカスタマイズ

この記事では「8種類のSNSボタン」と「お問い合わせ用のメールボタンプロフィール用のボタン」のカスタマイズコードを「18パターン」載せています。

どれもコピペで使えますが、最初にHTMLコードを簡単に解説します。

このページのアイコンは9〜10個で構成しています。

わかりやすいよう各URL先を(赤字)、リンク先の名前を(緑字)にしています。

アイコンは「Font Awesome5」を使用しています。

HTMLコードサンプル
<ul class="snsbtniti">
<li><a href="TwitterのプロフィールURL" class="flowbtn fl_tw1"
><i class="fab fa-twitter"></i><div>Twitter</div></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn insta_btn1"><i class="fab fa-instagram"></i><div>Instagram</div></a></li>
<li><a href="FacebookページのURL" class="flowbtn fl_fb1"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn  fl_fd1"><i class="fas fa-rss"></i><div>Feedly</div></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn fl_pk1"><i class="fab fa-get-pocket"></i><div>Pocket</div></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn  fl_hb1"><i class="fas fa-bold"></i><div>Hatena</div></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn fl_yu1"><i class="fab fa-youtube"></i><div>YouTube</div></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn fl_li1"><i class="fab fa-line"></i><div>LINE@</div></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn fl_ma1"><i class="far fa-envelope"></i><div>Contact</div></a></li>
</ul>

各URLの詳細は「よくある質問コーナー」に記載しています。

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

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

またそれぞれ(緑色部分)を変更すればボタン内の文字を変更できます。

※文字なしタイプのボタンは関係ありません。


続いて、CSSコードです。

CSS子テーマのスタイルシート (style.css)にコピペしましょう。

WordPressスタイルシート
手順
  1. 外観の中にある「テーマの編集」をクリック
  2. コード貼り付け
  3. ファイルを更新」をクリック

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

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

うまくいかなかった方は「よくある質問」を設置したので、そちらもあわせて参照ください。

18パターンのSNSボタン一覧表

気になるボタンをクリックしていただくと、コードの記載場所までひとっ飛びできます。

1.四角いベタ塗りのSNSボタン(文字付き)

SNSボタン一覧表に戻る

マウスを乗せるとフワッと浮き上がります。

ボタンカラーはbackground部分で変更してね。

HTML
<ul class="snsbtniti">
<li><a href="TwitterのプロフィールURL" class="flowbtn fl_tw1"
><i class="fab fa-twitter"></i><div>Twitter</div></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn insta_btn1"><i class="fab fa-instagram"></i><div>Instagram</div></a></li>
<li><a href="FacebookページのURL" class="flowbtn fl_fb1"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn  fl_fd1"><i class="fas fa-rss"></i><div>Feedly</div></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn fl_pk1"><i class="fab fa-get-pocket"></i><div>Pocket</div></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn  fl_hb1"><i class="fas fa-bold"></i><div>Hatena</div></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn fl_yu1"><i class="fab fa-youtube"></i><div>YouTube</div></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn fl_li1"><i class="fab fa-line"></i><div>LINE@</div></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn fl_ma1"><i class="far fa-envelope"></i><div>Contact</div></a></li>
</ul>
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;
}
.flowbtn i{
position:relative;
bottom:5px;
}
/* Twitter */
.fl_tw1{
background:#55acee;
}
/* 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;
}
/* 問い合わせ */
.fl_ma1{
background:#f3981d;	
}
/* 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;
position:relative;
bottom:22px;
}
/* ボタンマウスホバー時 */
.flowbtn:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
text-decoration:none;
}
/* ulタグの内側余白を0にする */
ul.snsbtniti{
padding:0!important;
}
/* ボタン全体の位置調整 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
}
/* ボタン同士の余白調整 */
.snsbtniti li{
flex:0 0 33%;
text-align:center!important;
}

2.文字付き四角い枠線ボタン

SNSボタン一覧表に戻る

マウスを乗せると枠線と同じカラーに変わります。

CSSが少しだけ細かくなるので注意してね。

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="インスタのプロフィール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="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn2 fl_fd2"><i class="fas fa-rss"></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="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn2 fl_hb2"><i class="fas fa-bold"></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="fab fa-line"></i><div>LINE@</div></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn2 fl_ma2"><i class="far fa-envelope"></i><div>Contact</div></a></li>
</ul>
style.css
/* ボタン全体 */
.flowbtn2{
font-family:'Courier',sans-serif;/* 好きなフォントに変えてね */
border-radius:4px;
display:inline-block;
width:66px;
height:58px;
font-size:30px;
transition:.5s;
text-decoration:none;
}
.flowbtn2 i{
position:relative;
bottom:5px;
}
/* ボタンマウスホバー時のテキスト指定 */
.flowbtn2:hover{
color:#fff!important;
text-decoration:none;
}
/* Twitter */
.flowbtn2.fl_tw2{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn2.fl_tw2:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* お問い合わせ */
.flowbtn2.fl_ma2{
border:solid 1px #f3981d;
color:#f3981d;	
}
/* お問い合わせマウスホバー時 */
.flowbtn2.fl_ma2:hover{
border:solid 1px #f3981d;
background:#f3981d;
}
/* 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;	
letter-spacing:0;
font-weight:bold;
position:relative;
bottom:22px;
}
/* ulタグの内側余白を0にする */
ul.snsbtniti{
padding:0!important;
}
/* ボタンの位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
}
/* ボタン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center!important;
}

CSSが上手くいかないときは「よくある質問コーナーへGO

3.丸いベタ塗りのSNSボタン(文字付き)

SNSボタン一覧表に戻る

丸くしてみました。

フォントを変えるだけでも雰囲気が変わるよ。

HTML
<ul class="snsbtniti">
<li><a href="TwitterのプロフィールURL" class="flowbtn3 fl_tw1"
><i class="fab fa-twitter"></i><div>Twitter</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_fb1"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn3 fl_fd1"><i class="fas fa-rss"></i><div>Feedly</div></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn3 fl_pk1"><i class="fab fa-get-pocket"></i><div>Pocket</div></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn3 fl_hb1"><i class="fas fa-bold"></i><div>Hatena</div></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn3 fl_yu1"><i class="fab fa-youtube"></i><div>YouTube</div></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn3 fl_li1"><i class="fab fa-line"></i><div>LINE@</div></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn3 fl_ma1"><i class="far fa-envelope"></i><div>Contact</div></a></li>
</ul>
style.css
/* ボタン全体 */
.flowbtn3{
font-family:'Comic Sans MS','Chalkboard SE',sans-serif;/* 好きなフォントに変えてね */
border-radius:50%;
position:relative;
display:inline-block;
width:70px;
height:70px;
font-size:30px;
color:#fff!important;
text-decoration:none;
transition:.5s;
}
.flowbtn3 i{
position:relative;
bottom:5px;
}
/* Twitter */
.fl_tw1{
background:#55acee;
}
/* 問い合わせ */
.fl_ma1{
background:#f3981d;	
}
/* Feedly */
.fl_fd1{
background:#6cc655;
}
/* Pocket */
.fl_pk1{
background:#ef3f56;
}
/* Facebook */
.fl_fb1{
background:#3b5998;
}
/* はてブ */
.fl_hb1{
background:#1ba5dc;
}
/* YouTube */
.fl_yu1{
background:#fc0d1c;
}
/* [email protected] */
.fl_li1{
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;
}
/* ボタン内のテキスト */
.flowbtn3 div{
font-size:11px;	
font-weight:bold;
position:relative;
bottom:21px;
}
/* ulタグの内側余白を0にする */
ul.snsbtniti{
padding:0!important;
}
/* ボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
}
/* ボタン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center!important;
}
/* ボタンにマウスホバー時 */
.flowbtn3:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
text-decoration:none;
}

CSSが上手くいかないときは「よくある質問コーナーへGO

4.丸い枠線のSNSボタン(文字付き)

SNSボタン一覧表に戻る

枠線の丸いバージョン。

コードの微調整が必要だよ。

HTML
<ul class="snsbtniti">
<li><a href="TwitterのプロフィールURL" class="flowbtn4 fl_tw2"
><i class="fab fa-twitter"></i><div>Twitter</div></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn4 insta_btn2"><i class="fab fa-instagram"></i><div>Instagram</div></a></li>
<li><a href="FacebookページのURL" class="flowbtn4 fl_fb2"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn4 fl_fd2"><i class="fas fa-rss"></i><div>Feedly</div></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn4 fl_pk2"><i class="fab fa-get-pocket"></i><div>Pocket</div></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn4 fl_hb2"><i class="fas fa-bold"></i><div>Hatena</div></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn4 fl_yu2"><i class="fab fa-youtube"></i><div>YouTube</div></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn4 fl_li2"><i class="fab fa-line"></i><div>LINE@</div></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn4 fl_ma2"><i class="far fa-envelope"></i><div>Contact</div></a></li>
</ul>
style.css
/* ボタン全体の装飾 */
.flowbtn4{
font-family:'Trebuchet MS',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_tw2{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn4.fl_tw2:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Instagram */
.flowbtn4.insta_btn2 {
border:solid 1px #c6529a;
color:#c6529a;
}
/* Instagramマウスホバー時 */
.flowbtn4.insta_btn2:hover{
border:solid 1px #c6529a;
background:#c6529a;
}
/* Facebook */
.flowbtn4.fl_fb2{
border:solid 1px #3b5998;
color:#3b5998;
}
/* Facebookマウスホバー時 */
.flowbtn4.fl_fb2:hover{
border:solid 1px #3b5998;
background:#3b5998;
}
/* Feedly */
.flowbtn4.fl_fd2{
border:solid 1px #6cc655;
color:#6cc655;
}
/* Feedlyマウスホバー時 */
.flowbtn4.fl_fd2:hover{
border:solid 1px #6cc655;
background:#6cc655;
}
/* Pocket */
.flowbtn4.fl_pk2{
border:solid 1px #ef3f56;
color:#ef3f56;
}
/* Pocketマウスホバー時 */
.flowbtn4.fl_pk2:hover{
border:solid 1px #ef3f56;
background:#ef3f56;
}
/* はてブ */
.flowbtn4.fl_hb2{
border:solid 1px #1ba5dc;
color:#1ba5dc;
}
/* はてブマウスホバー時 */
.flowbtn4.fl_hb2:hover{
border:solid 1px #1ba5dc;
background:#1ba5dc;
}
/* YouTube */
.flowbtn4.fl_yu2{
border:solid 1px #fc0d1c;
color:#fc0d1c;
}
/* YouTubeマウスホバー時 */
.flowbtn4.fl_yu2:hover{
border:solid 1px #fc0d1c;
background:#fc0d1c;
}
/* LINE */
.flowbtn4.fl_li2{
border:solid 1px #00c300;
color:#00c300;
}
/* LINEマウスホバー時 */
.flowbtn4.fl_li2:hover{
border:solid 1px #00c300;
background:#00c300;
}
/* お問い合わせ */
.flowbtn4.fl_ma2{
border:solid 1px #f3981d;
color:#f3981d;	
}
/* お問い合わせマウスホバー時 */
.flowbtn4.fl_ma2:hover{
border:solid 1px #f3981d;
background:#f3981d;
}
/* ボタン内テキスト調整 */
.flowbtn4 div{
font-size:11px;	
font-weight:bold;
position:relative;
bottom:22px;		
}
/* ulタグの内側余白を0にする */
ul.snsbtniti{
padding:0!important;
}
/* ボタンの位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
}
/* ボタン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center!important;
}

CSSが上手くいかないときは「よくある質問コーナーへGO

5.ボタンの下に文字を表示させるSNSボタン

SNSボタン一覧表に戻る

オシャレなボタンです。

キレイに見せるコツは「Instagram」のアイコンだけサイズを大きくすること。

HTML
<ul class="snsbtniti">
<li><a href="TwitterのプロフィールURL" class="flowbtn5 fl_tw1"
><i class="fab fa-twitter"></i><div>Twitter</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_fb1"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn5 fl_fd1"><i class="fas fa-rss"></i><div>Feedly</div></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn5 fl_pk1"><i class="fab fa-get-pocket"></i><div>Pocket</div></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn5 fl_hb1"><i class="fas fa-bold"></i><div>Hatena</div></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn5 fl_yu1"><i class="fab fa-youtube"></i><div>YouTube</div></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn5 fl_li1"><i class="fab fa-line"></i><div>LINE@</div></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn5 fl_ma1"><i class="far fa-envelope"></i><div>Contact</div></a></li>
</ul>
補足

サンプルボタンは.flowbtn5margin-bottom:10px;を追加し、見た目を整えています。

style.css
/* ボタン全体 */
.flowbtn5{
font-family:'Times New Roman',sans-serif;/* 好きなフォントに変えてね */	
border-radius:13px;		
position:relative;
display:inline-block;
width:50px;
height:50px;
font-size:33px;
color:#fff!important;
transition:.5s;
text-decoration:none;
}
/* アイコンをど真ん中に*/
.flowbtn5 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* Twitter */
.fl_tw1{
background:#55acee;
}
/* 問い合わせ */
.fl_ma1{
background:#f3981d;	
}
/* 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_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:17px;
left:-1px;
width:45px;
height:34px;
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;	
}
/* アイコンボタン下テキスト調整 */
.flowbtn5 div{
font-size:11px;
color:#666;	
position:relative;
top:45px;
}
/* アイコンボタンにマウスホバーした時の指定*/
.flowbtn5:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
text-decoration:none;
}
/* ulタグの内側余白を0にする */
ul.snsbtniti{
padding:0!important;
}
/* アイコンボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
}
/* アイコンボタン同士の余白調整 */
.snsbtniti li{
flex:0 0 33%;
text-align:center!important;
}

CSSが上手くいかないときは「よくある質問コーナーへGO

6.アプリアイコン風SNSボタン

SNSボタン一覧表に戻る

多分使われないと思うけど、今回一番こだわったボタンです。笑

HTML
<ul class="snsbtniti">
<li><a href="TwitterのプロフィールURL" class="flowbtn6 fl_tw1"
><i class="fab fa-twitter"></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="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn6 fl_fd6"><i class="fas fa-rss"></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="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn6 fl_hb6"><i class="fas fa-bold"></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_li1"><i class="fas fa-at"></i></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn6 fl_ma6"><i class="far fa-envelope"></i></a></li>
</ul>
style.css
/* ボタン全体 */
.flowbtn6{
border-radius:13px;		
position:relative;
display:inline-block;
width:50px;
height:50px;
font-size:33px;
color:#fff!important;
transition:.5s;
text-decoration:none;
}	
/* アイコンをど真ん中に*/
.flowbtn6 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* ulタグの内側余白を0にする */
ul.snsbtniti{
padding:0!important;
}
/* アイコンボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
}
/* アイコンボタン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center!important;
}
/* アイコンボタンにマウスを乗せた時 */
.flowbtn6:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
}
/* Twitter */
.fl_tw1{
background:#55acee;
}
/* Instagramアイコン位置 */
.insta_btn6 .fa-instagram{
font-size:40px;
}
/* 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%);
}
/* Facebookアイコン位置 */
.fl_fb6 .fa-facebook-f{
position:relative;
top:23px;
left:17px;
font-size:43px;
}
/* Facebookアイコン背景*/
.fl_fb6{
background:-webkit-linear-gradient(top, #5c80c6 0%, #34528c 74%);	
background:linear-gradient(to bottom, #5c80c6 0%, #34528c 74%);	
}
/* Feedly */
.fl_fd6{
background:#33b151;		
}
/* Pocket */
.fl_pk6{
color:#ef3f56!important;	
box-shadow:0 0 2px #888;
font-size:35px;		
}
/* はてブ */
.fl_hb6 {
background:-webkit-linear-gradient(top, #1fbccd 0%, #1c91d4 84%);	
background:linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%);		
font-size:25px;	
}
/* YouTube */
.fl_yu6 {
color:#fc0d1c!important;
box-shadow:0 0 2px #888;	
}
/* [email protected] */
.fl_li6{
background:#00c300;			
}
/* メール */
.fl_ma6{
background:linear-gradient(135deg, #1B77F1 0%,#19BDFC 100%);	
}

CSSが上手くいかないときは「よくある質問コーナーへGO

7.グラデーションをかけた丸いボタン

SNSボタン一覧表に戻る

グラデーションをかけてみました。

女性向けサイトと相性が良さそうですね。

HTML
<ul class="snsbtniti">
<li><a href="TwitterのプロフィールURL" class="flowbtn7 fl_tw7"
><i class="fab fa-twitter"></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="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn7 fl_fd7"><i class="fas fa-rss"></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="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn7 fl_hb7"><i class="fas fa-bold"></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="fab fa-line"></i></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn7 fl_ma7"><i class="far fa-envelope"></i></a></li>
</ul>
style.css
/* ボタン全体 */
.flowbtn7{
border-radius:50%;
position:relative;
display:inline-block;
width:50px;
height:50px;
font-size:30px;
color:#fff!important;
text-decoration:none;
transition:.5s;			
}
/* アイコンをど真ん中に*/
.flowbtn7 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* ulタグの内側余白を0にする */
ul.snsbtniti{
padding:0!important;
}
/* ボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
}
/* ボタン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center !important;
}
/* ボタンにマウスを乗せた時 */
.flowbtn7:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
}
/* Twitter */
.fl_tw7{
background:linear-gradient(135deg, #13f1fc 0%,#0470dc 100%);
}
/* Instagramアイコン位置 */
.insta_btn7 .fa-instagram{
font-size:35px;	
}
/* 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:59px;
height:40px;
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%);
}
/* Facebook */
.fl_fb7{
background: linear-gradient(135deg, #6699ff 0%,#3b5998 100%);
}
/* Feedly */
.fl_fd7{
background:linear-gradient(135deg, #b1ea4d 0%,#459522 100%);
font-size:28px;
}
/* Pocket */
.fl_pk7{
background:linear-gradient(135deg, #f36265 0%,#dd4f68 100%);
}
/* はてブ */
.fl_hb7{
background: linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%);
font-size:25px;
}
/* YouTube */
.fl_yu7{
background:linear-gradient(135deg, #f5515f 0%,#c9293c 100%);
font-size:26px;
}
/* LINE */
.fl_li7{
background: linear-gradient(135deg, #3a9278 0%,#00c300 100%);
}
/* メールボタン */
.fl_ma7{
background:linear-gradient(135deg, #fad961 0%,#f76b1c 100%);
font-size:26px;	
}

CSSが上手くいかないときは「よくある質問コーナーへGO

8.丸い枠線のSNSボタン

SNSボタン一覧表に戻る

丸い枠線は少しスタイリッシュになりますね。

HTML
<ul class="snsbtniti">
<li><a href="TwitterのプロフィールURL" class="flowbtn8 fl_tw2"
><i class="fab fa-twitter"></i></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn8 insta_btn2"><i class="fab fa-instagram"></i></a></li>
<li><a href="FacebookページのURL" class="flowbtn8 fl_fb2"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn8 fl_fd2"><i class="fas fa-rss"></i></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn8 fl_pk2"><i class="fab fa-get-pocket"></i></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn8 fl_hb2"><i class="fas fa-bold"></i></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn8 fl_yu2"><i class="fab fa-youtube"></i></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn8 fl_li2"><i class="fab fa-line"></i></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn8 fl_ma2"><i class="far fa-envelope"></i></a></li>
</ul>
style.css
/* ボタン全体 */
.flowbtn8{
border-radius:50%;
position:relative;
display:inline-block;
width:50px;
height:50px;
font-size:30px;
text-decoration:none;
transition:.5s;
}
/* ボタンマウスホバー時のテキスト指定 */
.flowbtn8:hover{
color:#fff!important;
}
/* アイコンをど真ん中に */
.flowbtn8 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* Twitter */
.flowbtn8.fl_tw2{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn8.fl_tw2:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Instagram */
.flowbtn8.insta_btn2 {
border:solid 1px #c6529a;
color:#c6529a;
font-size:35px;
}
/* Instagramマウスホバー時 */
.flowbtn8.insta_btn2:hover{
border:solid 1px #c6529a;
background:#c6529a;
}
/* Facebook */
.flowbtn8.fl_fb2{
border:solid 1px #3b5998;
color:#3b5998;
}
/* Facebookマウスホバー時 */
.flowbtn8.fl_fb2:hover{
border:solid 1px #3b5998;
background:#3b5998;
}
/* Feedly */
.flowbtn8.fl_fd2{
border:solid 1px #6cc655;
color:#6cc655;
font-size:28px;
}
/* Feedlyマウスホバー時 */
.flowbtn8.fl_fd2:hover{
border:solid 1px #6cc655;
background:#6cc655;
}
/* Pocket */
.flowbtn8.fl_pk2{
border:solid 1px #ef3f56;
color:#ef3f56;
font-size:32px;
}
/* Pocketマウスホバー時 */
.flowbtn8.fl_pk2:hover{
border:solid 1px #ef3f56;
background:#ef3f56;
}
/* はてブ */
.flowbtn8.fl_hb2{
border:solid 1px #1ba5dc;
color:#1ba5dc;
font-size:25px;
}
/* はてブマウスホバー時 */
.flowbtn8.fl_hb2:hover{
border:solid 1px #1ba5dc;
background:#1ba5dc;
}
/* YouTube */
.flowbtn8.fl_yu2{
border:solid 1px #fc0d1c;
color:#fc0d1c;
font-size:28px;	
}
/* YouTubeマウスホバー時 */
.flowbtn8.fl_yu2:hover{
border:solid 1px #fc0d1c;
background:#fc0d1c;
}
/* LINE */
.flowbtn8.fl_li2{
border:solid 1px #00c300;
color:#00c300;
font-size:35px;
}
/* LINEマウスホバー時 */
.flowbtn8.fl_li2:hover{
border:solid 1px #00c300;
background:#00c300;
}
/* お問い合わせ */
.flowbtn8.fl_ma2{
border:solid 1px #f3981d;
color:#f3981d;	
font-size:28px;
}
/* お問い合わせマウスホバー時 */
.flowbtn8.fl_ma2:hover{
border:solid 1px #f3981d;
background:#f3981d;
}
/* ulタグの内側余白を0にする */
ul.snsbtniti{
padding:0!important;
}
/* ボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
}
/* ボタン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center!important;
}

CSSが上手くいかないときは「よくある質問コーナーへGO

9.アイコンフォントのみで作るSNSボタン

SNSボタン一覧表に戻る

コードが短いので、初心者の方でも簡単。

はてブっぽいアイコンは「バージョン5.8.0」で追加されたものです。

HTML
<ul class="snsbtniti">
<li><a  href="TwitterのプロフィールURL" class="flowbtn9"><i class="fab fa-twitter-square"></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="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="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn9"><i class="fab fa-bootstrap"></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>
style.css
/* ボタン全体 */
.flowbtn9{
display:inline-block;	
font-size:40px;
text-decoration:none;
transition:.5s;
}
/* Twitter */
.flowbtn9 .fa-twitter-square{
color:#55acee;
}
/* Instagram */
.flowbtn9 .fa-instagram{
color:#c6529a;
}
/* Facebook*/
.flowbtn9 .fa-facebook-square{
color:#3b5998;
}
/* Feedly */
.flowbtn9 .fa-rss-square{
color:#6cc655;
}
/* Pocket */
.flowbtn9 .fa-get-pocket{
color:#ef3f56;
}
/* はてブ */
.flowbtn9 .fa-bootstrap{
color:#1ba5dc;	
}
/* YouTube */
.flowbtn9 .fa-youtube-square{
color:#fc0d1c;
}
/* [email protected] */
.flowbtn9 .fa-line{
color:#00c300;
}
/* お問い合わせメール */
.flowbtn9 .fa-envelope-square{
color:#f3981d;	
}
/* ulタグの内側余白を0にする */
ul.snsbtniti{
padding:0!important;
}
/* アイコン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
}
/* アイコン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center!important;
}
/* アイコンにマウスを乗せた時 */
.flowbtn9:hover{
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}

CSSが上手くいかないときは「よくある質問コーナーへGO

10.アイコンフォントのみモノクロ風SNSボタン

SNSボタン一覧表に戻る

当サイトのようにブラックベースのサイトだと相性良さそうですね。

HTML
<ul class="snsbtniti">
<li><a href="TwitterのプロフィールURL" class="flowbtn10"><i class="fab fa-twitter"></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><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn10"><i class="fas fa-rss"></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="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn10"><i class="fas fa-bold"></i></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn10"><i class="fab fa-youtube"></i></a>
<li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn10"><i class="fab fa-line"></i></a>
<li><a href="お問い合わせ先のURL" class="flowbtn10"><i class="far fa-envelope"></i></a></li>
</ul>
style.css
/* ボタン全体 */
.flowbtn10{
display:inline-block;	
font-size:35px;
text-decoration:none;
transition:.5s;
color:#444;	
}
/* インスタ・pocket・ラインだけ少し大きく */
.flowbtn10 .fa-instagram,.flowbtn10 .fa-get-pocket,.flowbtn10 .fa-get-pocket,.flowbtn10 .fa-line{
font-size:38px;
}
/* Twitterマウスホバー時 */
.flowbtn10 .fa-twitter:hover{
color:#55acee;
}
/* Instagramマウスホバー時 */
.flowbtn10 .fa-instagram:hover{
color:#c6529a;
}
/* Facebookマウスホバー時 */
.flowbtn10 .fa-facebook-f:hover{
color:#3b5998;
}
/* Feedlyマウスホバー時 */
.flowbtn10 .fa-rss:hover{
color:#6cc655;
}
/* Pocketマウスホバー時 */
.flowbtn10 .fa-get-pocket:hover{
color:#ef3f56;
}
/* はてブマウスホバー時 */
.flowbtn10 .fa-bold:hover{
color:#1ba5dc;	
}
/* YouTubeマウスホバー時 */
.flowbtn10 .fa-youtube:hover{
color:#fc0d1c;
}
/* LINEマウスホバー時 */
.flowbtn10 .fa-line:hover{
color:#00c300;
}
/* メールアイコンマウスホバー時 */
.flowbtn10 .fa-envelope:hover{
color:#f3981d;		
}
/* ulタグの内側余白を0にする */
ul.snsbtniti{
padding:0!important;
}
/* アイコン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-between;	
}
/* アイコン同士の余白 */
.snsbtniti li{
flex:0 0 33%;
text-align:center!important;
}

CSSが上手くいかないときは「よくある質問コーナーへGO

11.横長ベタ塗りのSNSボタン

SNSボタン一覧表に戻る

バランスが悪かったので「プロフィールボタン」も追加しました。

マウスを乗せると文字がクルクル回転します。

HTML
<ul class="snsbtniti2">
<li><a  href="TwitterのプロフィールURL" class="flowbtn11 fl_tw1"
><i class="fab fa-twitter"></i><span>Twitter</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_fb1"><i class="fab fa-facebook-f"></i><span>Facebook</span></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn11 fl_fd1"><i class="fas fa-rss"></i><span>Feedly</span></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn11 fl_pk1"><i class="fab fa-get-pocket"></i><span>Pocket</span></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn11 fl_hb1"><i class="fas fa-bold">!</i><span>Hatena</span></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn11 fl_yu1"><i class="fab fa-youtube"></i><span>YouTube</span></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn11 fl_li1"><i class="fab fa-line"></i><span>LINE@</span></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn11 fl_ma1"><i class="far fa-envelope"></i><span>Email</span></a></li>
<li><a href="プロフィール先のURL" class="flowbtn11 fl_pf11"><i class="fas fa-user-edit"></i><span>Profile</span></a></li>
</ul>
style.css
/* ボタン全体 */
.flowbtn11{
font-family:'Verdana',sans-serif;	
border-radius:4px;
position:relative;
display:inline-block;
width:90%;
font-size:20px;
color:#fff!important;
text-decoration:none;
margin-bottom:5px;
}
/* Twitter */
.fl_tw1{
background:#55acee;
}
/* 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%);
}
/* Facebook */
.fl_fb1{
background:#3b5998;
}
/* Feedly */
.fl_fd1{
background:#6cc655;
}
/* Pocket */
.fl_pk1{
background:#ef3f56;
}
/* はてブ */
.fl_hb1{
background:#1ba5dc;
}
/* YouTube */
.fl_yu1{
background:#fc0d1c;
}
/* LINE */
.fl_li1{
background:#00c300;
}
/* お問い合わせメール */
.fl_ma1{
background:#f3981d;
}
/* プロフィール */
.fl_pf11{
background:#555;
}
/* アイコンボタンホバー時 */
.flowbtn11:hover span{
-webkit-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
transform: rotateX(360deg);
text-decoration:none;
}
/* ボタン内テキスト調整 */
.flowbtn11 span{
font-size:14px;	
position:relative;
left:8px;
bottom:2px;
transition:.6s;	
display:inline-block;	
}
/* ulタグの内側余白を0にする */
ul.snsbtniti2{
padding:0!important;
}
/* アイコンボタンの位置調整 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
}
/* アイコンボタン同士の余白調整 */
.snsbtniti2 li{
flex:0 0 48%;
text-align:center!important;
}

CSSが上手くいかないときは「よくある質問コーナーへGO

12.横長の枠線SNSボタン

SNSボタン一覧表に戻る

ボタンにマウスを乗せると色が変わるよ

HTML
<ul class="snsbtniti2">
<li><a  href="TwitterのプロフィールURL" class="flowbtn12 fl_tw2"
><i class="fab fa-twitter"></i><span>Twitter</span></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn12 insta_btn2"><i class="fab fa-instagram"></i><span>Instagram</span></a></li>
<li><a href="FacebookページのURL" class="flowbtn12 fl_fb2"><i class="fab fa-facebook-f"></i><span>Facebook</span></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn12 fl_fd2"><i class="fas fa-rss"></i><span>Feedly</span></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn12 fl_pk2"><i class="fab fa-get-pocket"></i><span>Pocket</span></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn12 fl_hb2"><i class="fas fa-bold">!</i><span>Hatena</span></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn12 fl_yu2"><i class="fab fa-youtube"></i><span>YouTube</span></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn12 fl_li2"><i class="fab fa-line"></i><span>LINE@</span></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn12 fl_ma2"><i class="far fa-envelope"></i><span>Email</span></a></li>
<li><a href="プロフィール先のURL" class="flowbtn12 fl_pf12"><i class="fas fa-user-edit"></i><span>Profile</span></a></li>
</ul>
style.css
/* ボタン全体 */
.flowbtn12{
font-family:'Verdana',sans-serif;	
border-radius: 4px;
display:inline-block;
width:90%;
font-size:20px;
transition:.4s;	
text-decoration:none;
}
/* ボタン内テキストマウスホバー時 */
.flowbtn12:hover{
color:#fff!important;
text-decoration:none;
}
/* Twitter */
.flowbtn12.fl_tw2{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn12.fl_tw2:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Instagram */
.flowbtn12.insta_btn2{
border:solid 1px #c6529a;
color:#c6529a;
}
/* Instagramマウスホバー時 */
.flowbtn12.insta_btn2:hover{
border:solid 1px #c6529a;
background:#c6529a;
}
/* Facebook */
.flowbtn12.fl_fb2{
border:solid 1px #3b5998;
color:#3b5998;
}
/* Facebookマウスホバー時 */
.flowbtn12.fl_fb2:hover{
border:solid 1px #3b5998;
background:#3b5998;
}
/* Feedly */
.flowbtn12.fl_fd2{
border:solid 1px #6cc655;
color:#6cc655;
}
/* Feedlyマウスホバー時 */
.flowbtn12.fl_fd2:hover{
border:solid 1px #6cc655;
background:#6cc655;
}
/* Pocket */
.flowbtn12.fl_pk2{
border:solid 1px #ef3f56;
color:#ef3f56;
}
/* Pocketマウスホバー時 */
.flowbtn12.fl_pk2:hover{
border:solid 1px #ef3f56;
background:#ef3f56;
}
/* はてブ */
.flowbtn12.fl_hb2{
border:solid 1px #1ba5dc;
color:#1ba5dc;
}
/* はてブマウスホバー時 */
.flowbtn12.fl_hb2:hover{
border:solid 1px #1ba5dc;
background:#1ba5dc;
}
/* YouTube */
.flowbtn12.fl_yu2{
border:solid 1px #fc0d1c;
color:#fc0d1c;
}
/* YouTubeマウスホバー時 */
.flowbtn12.fl_yu2:hover{
border:solid 1px #fc0d1c;
background:#fc0d1c;
}
/* LINE */
.flowbtn12.fl_li2{
border:solid 1px #00c300;
color:#00c300;
}
/* LINEマウスホバー時 */
.flowbtn12.fl_li2:hover{
border:solid 1px #00c300;
background:#00c300;
}
/* メールアイコン */
.flowbtn12.fl_ma2{
border:solid 1px #f3981d;
color:#f3981d;
}
/* メールアイコンマウスホバー時 */
.flowbtn12.fl_ma2:hover{
border:solid 1px #f3981d;
background:#f3981d;
}
/* プロフィールアイコン */
.flowbtn12.fl_pf12{
border:solid 1px #555;
color:#555;
}
/* プロフィールアイコンマウスホバー時 */
.flowbtn12.fl_pf12:hover{
border:solid 1px #555;
background:#555;
}
/* ボタン内テキスト調整 */
.flowbtn12 span{
font-size:14px;	
position:relative;
left:8px;
bottom:2px;	
}
/* ulタグの内側余白を0にする */
ul.snsbtniti2{
padding:0!important;
}
/* ボタン全体の位置 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
}
/* ボタン同士の余白 */
.snsbtniti2 li{
flex:0 0 48%;
text-align:center !important;
}

CSSが上手くいかないときは「よくある質問コーナーへGO

13.アイコン・テキスト・点線を組み合わせたSNSボタン

SNSボタン一覧表に戻る

ここまでくると趣味の域ですね……。

マウスを乗せると文字がビヨーンって伸びます。

HTML
<ul class="snsbtniti2">
<li><a class="flowbtn13 fl_tw13"><i class="fab fa-twitter-square"></i><span>Twitter</span></a></li>
<li><a class="flowbtn13 insta_btn13"><i class="fab fa-instagram"></i><span>Instagram</span></a></li>
<li><a class="flowbtn13 fl_fb13"><i class="fab fa-facebook-square"></i><span>Facebook</span></a></li>
<li><a class="flowbtn13  fl_fd13"><i class="fas fa-rss-square"></i><span>Feedly</span></a></li>
<li><a class="flowbtn13 fl_pk13"><i class="fab fa-get-pocket"></i><span>Pocket</span></a></li>
<li><a class="flowbtn13  fl_hb13"><i class="fab fa-bootstrap"></i><span>Hatena</span></a></li>
<li><a class="flowbtn13 fl_yu13"><i class="fab fa-youtube-square"></i><span>YouTube</span></a></li>
<li><a class="flowbtn13 fl_li13"><i class="fab fa-line"></i><span>LINE@</span></a></li>
<li><a class="flowbtn13 fl_ma13"><i class="fas fa-envelope-square"></i><span>Contact</span></a></li>
<li><a class="flowbtn13 fl_pf13"><i class="fas fa-user-edit"></i><span>Profile</span></a></li>
</ul>
補足

点線を消したい場合は.flowbtn13からborder-bottom:dotted 1px #bbb;を削除してください。

style.css
/* アイコン周り全体 */
.flowbtn13{
font-family:'Arial', sans-serif;	
display:inline-block;
width:90%;
font-size:30px;
text-align:left;
border-bottom:dotted 1px #bbb;	
text-decoration:none;
}
/* マウスホバー時に下線を消す */
.flowbtn13:hover{
text-decoration:none;
}
/* Twitter */
.flowbtn13 .fa-twitter-square{
color:#55acee;
}
/* Twitterマウスホバー時 */
.fl_tw13 span:hover{
color:#55acee;
}
/* Instagram */
.flowbtn13 .fa-instagram{
color:#c6529a;
}
/* Instagramマウスホバー時 */
.insta_btn13 span:hover{
color:#c6529a;	
}
/* Facebook */
.flowbtn13 .fa-facebook-square{
color:#3b5998;
}
/* Facebookマウスホバー時 */
.fl_fb13 span:hover{
color:#3b5998;	
}
/* Feedly */
.flowbtn13 .fa-rss-square{
color:#6cc655;
}
/* Feedlyマウスホバー時 */
.fl_fd13 span:hover{
color:#6cc655;	
}
/* Pocket */
.flowbtn13 .fa-get-pocket{
color:#ef3f56;
}
/* Pocketマウスホバー時 */
.fl_pk13 span:hover{
color:#ef3f56;	
}
/* はてブ */
.flowbtn13 .fa-bootstrap{
color:#1ba5dc;	
}
/* はてブマウスホバー時 */
.fl_hb13 span:hover{
color:#1ba5dc;	
}
/* YouTube */
.flowbtn13 .fa-youtube-square{
color:#fc0d1c;
}
/* YouTubeマウスホバー時 */
.fl_yu13 span:hover{
color: #fc0d1c;	
}
/* LINE */
.flowbtn13 .fa-line{
color:#00c300;
}
/* LINEマウスホバー時 */
.fl_li13 span:hover{
color:#00c300;	
}
/* メールアイコン */
.flowbtn13 .fa-envelope-square{
color:#f3981d;
}
/* メールアイコンマウスホバー時 */
.fl_ma13 span:hover{
color:#f3981d;	
}
/* プロフィールアイコン */
.flowbtn13 .fa-user-edit{
color:#000;
}
/* プロフィールアイコンマウスホバー時 */
.fl_pf13 span:hover{
color:#000;	
}
/* テキスト調整 */
.flowbtn13 span{
font-size:16px;	
position:relative;
left:8px;
bottom:6px;	
color:#666;	
}
/* テキストマウスホバー時*/
.flowbtn13 span:hover{
 transition: .5s;
font-weight:bold;	
margin-left:5px;	
}
/* ulタグの内側余白を0にする */
ul.snsbtniti2{
padding:0!important;
}
/* 全体の位置 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
}
/* 要素同士の余白 */
.snsbtniti2 li{
flex:0 0 48%;
text-align:center!important;
}

CSSが上手くいかないときは「よくある質問コーナーへGO

14.付箋風SNSフォローボタン

SNSボタン一覧表に戻る

13ではキリが悪かったので、無理やり作ったボタンです。

HTML
<ul class="snsbtniti2">
<li><a class="flowbtn14 fl_tw14"><i class="fab fa-twitter-square"></i><span>Twitter</span></a></li>
<li><a class="flowbtn14 insta_btn14"><i class="fab fa-instagram"></i><span>Instagram</span></a></li>
<li><a class="flowbtn14 fl_fb14"><i class="fab fa-facebook-square"></i><span>Facebook</span></a></li>
<li><a class="flowbtn14 fl_fd14"><i class="fas fa-rss-square"></i><span>Feedly</span></a></li>
<li><a class="flowbtn14 fl_pk14"><i class="fab fa-get-pocket"></i><span>Pocket</span></a></li>
<li><a class="flowbtn14 fl_hb14"><i class="fab fa-bootstrap"></i><span>Hatena</span></a></li>
<li><a class="flowbtn14 fl_yu14"><i class="fab fa-youtube-square"></i><span>YouTube</span></a></li>
<li><a class="flowbtn14 fl_li14"><i class="fab fa-line"></i><span>LINE@</span></a></li>
<li><a class="flowbtn14 fl_ma14"><i class="fas fa-envelope-square"></i><span>Contact</span></a></li>
<li><a class="flowbtn14 fl_pf14"><i class="fas fa-user-edit"></i><span>Profile</span></a></li>
</ul>
style.css
/* ボタン全体 */
.flowbtn14{
font-family:'Arial', sans-serif;	
display:inline-block;
width:90%;
font-size:23px;
text-align:left;
background:#f3f3f3;
border-radius:0 4px 4px 0; 
color:#666!important;
text-decoration:none;
margin-bottom:5px;
}
.flowbtn14:hover{
text-decoration:none;
}
/* Twitter */
.flowbtn14.fl_tw14{
border-left:solid 5px #55acee;	
padding-left:8px;		
}
/* Twitterマウスホバー時 */
.fl_tw14:hover{
color:#55acee !important;
}
/* Instagram */
.flowbtn14.insta_btn14{
border-left:solid 5px #c6529a;
padding-left:8px;				
}
/* Instagramマウスホバー時 */
.insta_btn14:hover{
color:#c6529a!important;	
}
/* Facebook */
.flowbtn14.fl_fb14{
border-left:solid 5px #3b5998;
padding-left:8px;				
}
/* Facebookマウスホバー時 */
.fl_fb14:hover{
color:#3b5998 !important;
}
/* Feedly */
.flowbtn14.fl_fd14{
border-left:solid 5px #6cc655;
padding-left:8px;			
}
/* Feedlyマウスホバー時 */
.fl_fd14:hover{
color:#6cc655 !important;
}
/* Pocket */
.flowbtn14.fl_pk14{
border-left:solid 5px #ef3f56;
padding-left:8px;			
}
/* Pocketマウスホバー時 */
.fl_pk14:hover{
color:#ef3f56!important;	
}
/* はてブ */
.flowbtn14.fl_hb14{
border-left:solid 5px #1ba5dc;
padding-left:8px;		
}
/* はてブマウスホバー時 */
.fl_hb14:hover{
color: #1ba5dc !important;	
}
/* YouTube */
.flowbtn14.fl_yu14{
border-left:solid 5px #fc0d1c;
padding-left:8px;				
}
/* YouTubeマウスホバー時 */
.fl_yu14:hover{
color: #fc0d1c!important;	
}
/* LINE */
.flowbtn14.fl_li14{
border-left:solid 5px #00c300;
padding-left:8px;				
}
/* LINEマウスホバー時 */
.fl_li14:hover{
color:#00c300!important;
}
/* メールアイコン */
.flowbtn14.fl_ma14{
border-left:solid 5px #f3981d;
padding-left:8px;				
}
/* メールアイコンマウスホバー時 */
.fl_ma14:hover{
color:#f3981d!important;	
}
/* プロフィールアイコン */
.flowbtn14.fl_pf14{
border-left:solid 5px #000;
padding-left:8px;
}
/* プロフィールアイコンマウスホバー時 */
.fl_pf14:hover{
color:#000!important;	
}
/* ボタン内テキスト調整 */
.flowbtn14 span{
font-size:16px;	
position:relative;
left:8px;
bottom:3px;	
}
/* ulタグの内側余白を0にする */
ul.snsbtniti2{
padding:0!important;
}
/* ボタン全体の位置 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
}
/* ボタン同士の余白 */
.snsbtniti2 li{
flex:0 0 48%;
text-align:center!important;
}

CSSが上手くいかないときは「よくある質問コーナーへGO

15.横長ベタ塗りの中央寄せボタン(文字付き)

SNSボタン一覧表に戻る

文字を中央にしたバージョン。

マウスを乗せると少し透明になります。

HTML
<ul class="snsbtniti2">
<li><a  href="TwitterのプロフィールURL" class="flowbtn15 fl_tw1"
><i class="fab fa-twitter"></i><div>Twitter</div></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn15 insta_btn15"><i class="fab fa-instagram"></i><div>Instagram</div></a></li>
<li><a href="FacebookページのURL" class="flowbtn15 fl_fb1"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn15  fl_fd1"><i class="fas fa-rss"></i><div>Feedly</div></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn15 fl_pk1"><i class="fab fa-get-pocket">&lt;/i><div>Pocket</div></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn15 fl_hb1"><i class="fas fa-bold"></i><div>Hatena</div></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn15 fl_yu1"><i class="fab fa-youtube"></i><div>YouTube</div></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn15 fl_li1"><i class="fab fa-line"></i><div>LINE@</div></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn15 fl_ma1"><i class="far fa-envelope"></i><span>Contact</span></a></li>
<li><a href="プロフィール先のURL" class="flowbtn15 fl_pf11"><i class="fas fa-user-edit"></i><div>Profile</div></a></li>
</ul>
style.css
/* アイコン周り全体 */
.flowbtn15{
font-family:'Arial',sans-serif;	
display:inline-block;
position:relative;
width:90%;
height:50px;
font-size:23px;
border-radius:5px;
color:#fff!important;
text-decoration:none;
}
.flowbtn15 i{
position:relative;
bottom:5px;
}
/* Twitter */
.fl_tw1{
background:#55acee;
}
/* Instagramアイコン位置 */
.insta_btn15 .fa-instagram{
font-size:28px;
}
/* Instagram紫グラデ背景色 */
.insta_btn15{
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_btn15:before{
content: '';
position:absolute;
top:27px;
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%);
}
/* Facebook */
.fl_fb1{
background:#3b5998;
}
/* Feedly */
.fl_fd1{
background:#6cc655;
}
/* Pocket */
.fl_pk1{
background:#ef3f56;
}
/* はてブ */
.fl_hb1{
background:#1ba5dc;
}
/* YouTube */
.fl_yu1{
background:#fc0d1c;
}
/* LINE */
.fl_li1{
background:#00c300;
}
/* お問い合わせメール */
.fl_ma1{
background:#f3981d;
}
/* プロフィール */
.fl_pf11{
background:#555;
}
/* アイコンボタンホバー時 */
.flowbtn15:hover{
text-decoration:none;
opacity:.8;
}
/* ボタン内テキスト調整 */
.flowbtn15 div{
font-size:16px;	
position:relative;
bottom:22px;
}
/* ulタグの内側余白を0にする */
ul.snsbtniti2{
padding:0!important;
}
/* アイコンボタンの位置調整 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
}
/* アイコンボタン同士の余白調整 */
.snsbtniti2 li{
flex:0 0 48%;
text-align:center!important;
}

CSSが上手くいかないときは「よくある質問コーナーへGO

16.文字付き四角い枠線ボタンのダークカラーバージョン

SNSボタン一覧表に戻る

ワントーンに揃えると一気に雰囲気が変わりますね。

HTML
<ul class="snsbtniti">
<li><a href="TwitterのプロフィールURL" class="flowbtn16 fl_tw2"
><i class="fab fa-twitter"></i><div>Twitter</div></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn16 insta_btn2"><i class="fab fa-instagram"></i><div>Instagram</div></a></li>
<li><a href="FacebookページのURL" class="flowbtn16 fl_fb2"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn16 fl_fd2"><i class="fas fa-rss"></i><div>Feedly</div></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn16 fl_pk2"><i class="fab fa-get-pocket"></i><div>Pocket</div></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn16 fl_hb2"><i class="fas fa-bold"></i><div>Hatena</div></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn16 fl_yu2"><i class="fab fa-youtube"></i><div>YouTube</div></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn16 fl_li2"><i class="fab fa-line"></i><div>LINE@</div></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn16 fl_ma2"><i class="far fa-envelope"></i><div>Contact</div></a></li>
</ul>
style.css
/* アイコン周り全体 */
.flowbtn16{
font-family:'Georgia',sans-serif;/* 好きなフォントに変えてね */
border-radius:4px;
display:inline-block;
width:66px;
height:58px;
font-size:30px;
transition:.5s;
text-decoration:none;
background-color:#444;
color:#fff;
}
.flowbtn16:hover{
text-decoration:none;
}
/* Twitterマウスホバー時 */
.flowbtn16.fl_tw2:hover{
background:#55acee;
}
/* Instagramマウスホバー時 */
.flowbtn16.insta_btn2:hover{
background:#c6529a;
}
/* Facebookマウスホバー時 */
.flowbtn16.fl_fb2:hover{
background:#3b5998;
}
/* Feedlyマウスホバー時 */
.flowbtn16.fl_fd2:hover{
background:#6cc655;
}
/* Pocketマウスホバー時 */
.flowbtn16.fl_pk2:hover{
background:#ef3f56;
}
/* はてブマウスホバー時 */
.flowbtn16.fl_hb2:hover{
background:#1ba5dc;
}
/* YouTubeマウスホバー時 */
.flowbtn16.fl_yu2:hover{
background:#fc0d1c;
}
/* LINEマウスホバー時 */
.flowbtn16.fl_li2:hover{
background:#00c300;
}
/* お問い合わせマウスホバー時 */
.flowbtn16.fl_ma2:hover{
background:#f3981d;
}
/* ボタン内テキスト調整 */
.flowbtn16 div{
font-size:11px;	
letter-spacing:0;
font-weight:bold;
position:relative;
bottom:20px;
}
/* ulタグの内側余白を0にする */
ul.snsbtniti{
padding:0!important;
}
/* アイコンボタンの位置調整 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
}
/* アイコンボタン同士の余白調整 */
.snsbtniti li{
flex:0 0 33%;
text-align:center!important;
}

CSSが上手くいかないときは「よくある質問コーナーへGO

17.丸いボタンのダークカラーバージョン

SNSボタン一覧表に戻る

ブラック系だと丸くてもスタイリッシュになります。

マウスを乗せるとカラーが変わるよ。

HTML
<ul class="snsbtniti">
<li><a href="TwitterのプロフィールURL" class="flowbtn17 fl_tw2"
><i class="fab fa-twitter"></i></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn17 insta_btn2"><i class="fab fa-instagram"></i></a></li>
<li><a href="FacebookページのURL" class="flowbtn17 fl_fb2"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn17 fl_fd2"><i class="fas fa-rss"></i></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn17 fl_pk2"><i class="fab fa-get-pocket"></i></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn17 fl_hb2"><i class="fas fa-bold"></i></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn17 fl_yu2"><i class="fab fa-youtube"></i></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn17 fl_li2"><i class="fab fa-line"></i></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn17 fl_ma2"><i class="far fa-envelope"></i></a></li>
</ul>
style.css
/* ボタン全体 */
.flowbtn17{
border-radius:50%;
position:relative;
display:inline-block;
width:50px;
height:50px;
font-size:30px;
text-decoration:none;
transition:.5s;
background-color:#444;
color:#fff;
}
/* ボタンマウスホバー時のテキスト指定 */
.flowbtn17:hover{
text-decoration:none;
}
/* アイコンをど真ん中に */
.flowbtn17 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* Twitterマウスホバー時 */
.flowbtn17.fl_tw2:hover{
background:linear-gradient(135deg, #13f1fc 0%,#0470dc 100%);
}
/* Instagramマウスホバー時 */
.flowbtn17.insta_btn2:hover{
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;		
}
/* Facebookマウスホバー時 */
.flowbtn17.fl_fb2:hover{
background:-webkit-linear-gradient(top, #5c80c6 0%, #34528c 74%);	
background:linear-gradient(to bottom, #5c80c6 0%, #34528c 74%);
}
/* Feedlyマウスホバー時 */
.flowbtn17.fl_fd2:hover{
background:linear-gradient(135deg, #b1ea4d 0%,#459522 100%);
font-size:28px;
}
/* Pocketマウスホバー時 */
.flowbtn17.fl_pk2:hover{
background:linear-gradient(135deg, #f36265 0%,#dd4f68 100%);
}
/* はてブアイコンのサイズ */
.flowbtn17.fl_hb2{
font-size:25px;
}
/* はてブマウスホバー時 */
.flowbtn17.fl_hb2:hover{
background:-webkit-linear-gradient(top, #1fbccd 0%, #1c91d4 84%);	
background:linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%);
}
/* YouTubeマウスホバー時 */
.flowbtn17.fl_yu2:hover{
background:linear-gradient(135deg, #f5515f 0%,#c9293c 100%);
}
/* LINEマウスホバー時 */
.flowbtn17.fl_li2:hover{
background: linear-gradient(135deg, #3a9278 0%,#00c300 100%);
}
/* お問い合わせマウスホバー時 */
.flowbtn17.fl_ma2:hover{
background:linear-gradient(135deg, #fad961 0%,#f76b1c 100%);
}
/* ulタグの内側余白を0にする */
ul.snsbtniti2{
padding:0!important;
}
/* ボタン全体の位置 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
}
/* ボタン同士の余白 */
.snsbtniti2 li{
flex:0 0 48%;
text-align:center !important;
}

18.横長ボタンダークバージョン

SNSボタン一覧表に戻る

サイトを選びますが、シックなサイトにはぜひ。

マウスを乗せるとカラーが変わります。

HTML
<ul class="snsbtniti2">
<li><a  href="TwitterのプロフィールURL" class="flowbtn18 fl_tw2"
><i class="fab fa-twitter"></i><div>Twitter</div></a></li>
<li><a href="インスタのプロフィールURL" class="flowbtn18 insta_btn2"><i class="fab fa-instagram"></i><div>Instagram</div></a></li>
<li><a href="FacebookページのURL" class="flowbtn18 fl_fb2"><i class="fab fa-facebook-f"></i><div>Facebook</div></a></li>
<li><a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn18 fl_fd2"><i class="fas fa-rss"></i><div>Feedly</div></a></li>
<li><a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn18 fl_pk2"><i class="fab fa-get-pocket"></i><div>Pocket</div></a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn18 fl_hb2"><i class="fas fa-bold"></i><div>Hatena</div></a></li>
<li><a href="youtubeのプロフィールURL" class="flowbtn18 fl_yu2"><i class="fab fa-youtube"></i><div>YouTube</div></a></li>
<li><a href="https://line.me/ti/p/%ライン@のアカウント"  class="flowbtn18 fl_li2"><i class="fab fa-line"></i><div>LINE@</div></a></li>
<li><a href="お問い合わせ先のURL" class="flowbtn18 fl_ma2"><i class="far fa-envelope"></i><span>Contact</span></a></li>
<li><a href="プロフィール先のURL" class="flowbtn18 fl_pf2"><i class="fas fa-user-edit"></i><div>Profile</div></a></li>
</ul>
style.css
.flowbtn18{
font-family:'Georgia',sans-serif;	
display:inline-block;
position:relative;
width:90%;
height:50px;
font-size:23px;
border-radius:5px;
background-color:#444;
color:#fff!important;
text-decoration:none;
}
.flowbtn18 i{
position:relative;
bottom:5px;
}
.flowbtn18:hover{
text-decoration:none;
}
.flowbtn18 div{
font-size:15px;	
position:relative;
bottom:22px;
}
/* Twitterマウスホバー時 */
.flowbtn18.fl_tw2:hover{
background:linear-gradient(135deg, #13f1fc 0%,#0470dc 100%);
}
/* Instagramマウスホバー時 */
.flowbtn18.insta_btn2:hover{
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;		
}
/* Facebookマウスホバー時 */
.flowbtn18.fl_fb2:hover{
background:-webkit-linear-gradient(top, #5c80c6 0%, #34528c 74%);	
background:linear-gradient(to bottom, #5c80c6 0%, #34528c 74%);
}
/* Feedlyマウスホバー時 */
.flowbtn18.fl_fd2:hover{
background:linear-gradient(135deg, #b1ea4d 0%,#459522 100%);
font-size:28px;
}
/* Pocketマウスホバー時 */
.flowbtn18.fl_pk2:hover{
background:linear-gradient(135deg, #f36265 0%,#dd4f68 100%);
}
.flowbtn18.fl_hb2{
font-size:25px;
}
/* はてブマウスホバー時 */
.flowbtn18.fl_hb2:hover{
background:-webkit-linear-gradient(top, #1fbccd 0%, #1c91d4 84%);	
background:linear-gradient(to bottom, #1fbccd 0%, #1c91d4 84%);
}
/* YouTubeマウスホバー時 */
.flowbtn18.fl_yu2:hover{
background:linear-gradient(135deg, #f5515f 0%,#c9293c 100%);
}
/* LINEマウスホバー時 */
.flowbtn18.fl_li2:hover{
background: linear-gradient(135deg, #3a9278 0%,#00c300 100%);
}
/* お問い合わせマウスホバー時 */
.flowbtn18.fl_ma2:hover{
background:linear-gradient(135deg, #fad961 0%,#f76b1c 100%);
}
/* プロフィールマウスホバー時 */
.flowbtn18.fl_pf2:hover{
background:linear-gradient(135deg, #fad961 0%,#f8a33f 100%);
}
/* ulタグの内側余白を0にする */
ul.snsbtniti2{
padding:0!important;
}
/* アイコンボタンの位置調整 */
.snsbtniti2{
display:flex;
flex-flow:row wrap;
}
/* アイコンボタン同士の余白調整 */
.snsbtniti2 li{
flex:0 0 48%;
text-align:center!important;
}

SNSフォローボタンのカスタマイズでよくある質問

質問

SNSボタン同士の余白を調整したい

SNSボタン問い合わせ内容

初めまして!こちらのページ『https://kagesai.net/sns-follow-button-design/#SNSCSS10』を参考に、デザイン7のフォローボタンを設置させていただきました。とても分かりやすく詳しい説明で、非常に役立ちました。ありがとうございます!1つ質問なのですが、ボタン3つのみ利用時に、ボタン同士の余白を少なくし、まとめて中央に寄せることは可能でしょうか?もし可能でしたら、ご回答いただければ大変ありがたく思います。参考に私のサイトURLを貼り付けます→https://◯◯◯◯.com/よろしくお願い致します。

回答

なるほど、サイドバーに小さめのボタンを3つだけ貼り付ける場合、確かに余白がありすぎてブサイクでしたね。

SNSボタン余白調整

Before

SNSボタン余白調整After

After

以下に赤字コードを追記してください

style.css
ul.snsbtniti{
padding:0!important;
width:200px;
margin:0 auto;
}

width:200px;を変更することで、ボタン同士の余白を調整できます。

質問

フォローボタンの並び数を変えたい

回答

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

例えば

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

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

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

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

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

質問
SNSボタンデザイン

liタグの黒ポチが消えません。

回答

以下に赤字コードを追記してください

style.css
ul.snsbtniti{
padding:0 !important;
list-style-type:none!important;
}

上記で消えないときはこちらも試してください

style.css
ul li:before {
width:0!important;
}
質問
SNSボタンデザイン4

ボタンの下に謎のボックスができて困ってます

回答

テーマによってなのかな?「pタグ」が勝手に挿入されちゃう場合があるみたいですね。

以下のコードを追記してみてください

style.css
.snsbtniti p {
display: none;
}
質問

フォローボタンのURLってどこにあるの?

回答

※クリックで画像を拡大できます

TwitterプロフィールURL

TwitterプロフィールURL

Twitter」にログイン

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

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

※クリックで画像を拡大できます

InstagramプロフィールURL

InstagramプロフィールURL

Instagram」にログイン

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

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

※クリックで画像を拡大できます

FacebookページURL

FacebookページURL

Facebook」にログイン

Facebookページ」をクリック

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

※クリックで画像を拡大できます

YouTubeマイチャンネルURL

YouTubeマイチャンネルURL

Youtube」にログイン

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

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

LINEログイン画面

LINEログイン画面

LINE」にログイン

メールアドレス」を入力

パスワード」を入力

ログイン」をクリック

LINEタイトル

LINEタイトル

LINE@アカウント

[email protected]アカウント

LINEタイトル」をクリック

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

Feedly・Hatena・Pocket

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

Contact・Profile

自分の問い合わせフォームまたはプロフィールページのURLを貼り付けてください。

SNSフォローボタン【まとめ】

自作フォローボタンだと愛着が湧きますよね。ぜひいろいろカスタムしていただければ〜。

2 COMMENTS

カゲオ カゲオ

ff様
ご指摘ありがとうございます。
確認したところ「グラデーションボタン」のclassのズレを発見したので、修正致しました。
現状そこくらいかと思いますが、また何かあればコメントいただけますと幸いです。
また、もしお手間でなければ「間違っている箇所」をご指摘頂けますと非常に助かります。
ご不便をおかけして申し訳ありません。
今後とも「カゲサイ」をよろしくお願いします。

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です