サブブログ｜デスク環境構築サイト運営中

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

SNSボタンカスタマイズ

SHARE

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

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

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

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

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

HTMLコードサンプル
copyする

<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
copyする

<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
copyする

/* ボタン全体 */
.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タグの内側余白を０にする */
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
copyする

<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
copyする

/* ボタン全体 */
.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タグの内側余白を０にする */
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
copyする

<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
copyする

/* ボタン全体 */
.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;
}
/* LINE@ */
.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タグの内側余白を０にする */
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
copyする

<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
copyする

/* ボタン全体の装飾 */
.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タグの内側余白を０にする */
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
copyする

<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>
補足

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

style.css
copyする

/* ボタン全体 */
.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タグの内側余白を０にする */
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
copyする

<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
copyする

/* ボタン全体 */
.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タグの内側余白を０にする */
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;	
}
/* LINE@ */
.fl_li6{
background:#00c300;			
}
/* メール */
.fl_ma6{
background:linear-gradient(135deg, #1B77F1 0%,#19BDFC 100%);	
}

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

スポンサーリンク






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

SNSボタン一覧表に戻る

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

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

HTML
copyする

<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
copyする

/* ボタン全体 */
.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タグの内側余白を０にする */
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
copyする

<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
copyする

/* ボタン全体 */
.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タグの内側余白を０にする */
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
copyする

<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
copyする

/* ボタン全体 */
.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;
}
/* LINE@ */
.flowbtn9 .fa-line{
color:#00c300;
}
/* お問い合わせメール */
.flowbtn9 .fa-envelope-square{
color:#f3981d;	
}
/* ulタグの内側余白を０にする */
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
copyする

<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
copyする

/* ボタン全体 */
.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タグの内側余白を０にする */
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
copyする

<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
copyする

/* ボタン全体 */
.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タグの内側余白を０にする */
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
copyする

<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
copyする

/* ボタン全体 */
.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タグの内側余白を０にする */
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
copyする

<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
copyする

/* アイコン周り全体 */
.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タグの内側余白を０にする */
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
copyする

<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
copyする

/* ボタン全体 */
.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タグの内側余白を０にする */
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
copyする

<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
copyする

/* アイコン周り全体 */
.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タグの内側余白を０にする */
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
copyする

<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
copyする

/* アイコン周り全体 */
.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タグの内側余白を０にする */
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
copyする

<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
copyする

/* ボタン全体 */
.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タグの内側余白を０にする */
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
copyする

<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
copyする

.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タグの内側余白を０にする */
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』を参考に、デザイン７のフォローボタンを設置させていただきました。とても分かりやすく詳しい説明で、非常に役立ちました。ありがとうございます！１つ質問なのですが、ボタン３つのみ利用時に、ボタン同士の余白を少なくし、まとめて中央に寄せることは可能でしょうか？もし可能でしたら、ご回答いただければ大変ありがたく思います。参考に私のサイトURLを貼り付けます→https://◯◯◯◯.com/よろしくお願い致します。

回答

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

SNSボタン余白調整

Before

SNSボタン余白調整After

After

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

style.css
copyする

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

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

質問

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

回答

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

例えば

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

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

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

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

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

質問
SNSボタンデザイン

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

回答

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

style.css
copyする

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

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

style.css
copyする

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

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

回答

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

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

style.css
copyする

.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@アカウント

LINE@アカウント

「LINEタイトル」をクリック

↓

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

Feedly・Hatena・Pocket

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

Contact・Profile

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

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

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

30 COMMENTS

アバター SP

お世話になっております。
素人すぎて申し訳ありません。

こちらはWP以外にも使用できますか？
例えば、ネットショップ作成サイト（baseやカラーミーなど）でも使用できるのでしょうか。

コメントを投稿する
カゲオ カゲオ

SP様

どちらも使ったことはありませんが、CSSが使えるのでしたら、おそらく大丈夫なはずです。

よろしくお願いいたします。

アバター uk

質問失礼致します。こちらのサイトを拝見して”9″のコードを使用させていただいているのですが、もし可能であれば同じ種類でPodcastのアイコンのコードもお作りいただけないでしょうか。何とよろしくお願いいたします。

コメントを投稿する
アバター みちのく

かんたんに設置できて素晴らしいです。
初心者スミマセンうまく再現できないため教えて下さい。

枠やバックカラー＆マウスオーバーなど表示されますがアイコンが
表示されません。事前にダウンロードなど必要な手順があるのでしょうか

コメントを投稿する
アバター 安形智香

インスタグラムのアイコンを入れたのですが、指定したURLには飛ぶのですが、サイトのアイコンの中にインスタグラムの白いカメラの画像がなくて、困っています。

コメントを投稿する
アバター 珈琲じじい

サイドバーに追加したのですが、黒点が消えません。CSSのコードを2種類とも打っ他のですが消えませんでした。どうすれば良いですか？

コメントを投稿する
アバター ガイ

初めまして。
質問させて頂きます。
“12.横長の枠線SNSボタン”の、コードのところです。
なぜか、YouTubeの枠線だけが表示されません･･･(ｰｰ;)
いろいろ試してはいるのですが、解決しそうにないので質問させて頂きました。
よろしくお願いします！

コメントを投稿する
アバター ラッコ

すみません。以下のようにstyle.cssの最後に入れてみましたが変わりませんでした。
素人すぎて申し訳ありません。よろしくお願いいたします。
/* アイコンにマウスを乗せた時 */
.flowbtn9:hover{
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}

ul.snsbtniti {
position: relative;
bottom: 20px;
}

コメントを投稿する
カゲオ カゲオ

ラッコ様

サイトを見るとコードが適用されていないので、もう一度確認してみてください。

もしわからないのであれば、気になるほど余白は空いていないので、そのままでも問題ないと思いますよ。

よろしくお願いします。

アバター ラッコ

お手数おかけしました。ありがとうございました。

カゲオ カゲオ

IS様

サイト確認致しました。

１.Font Awesomeを読み込みこんでください。

２.CSSもコピペしてください。

よろしくお願いします。

アバター IS

解決できました！
とても助かりました…(´;ω;`)
ありがとうございました。

アバター ラッコ

こんにちは。大変参考になりました。ありがとうございます。2点質問させて頂いてもよろしいでしょうか。
何種類か試させていただいたのですが、フェイスブックのマークのみエラーになってしまいますのでそちらの修正方法を教えて頂けますと幸いです。
また、名前とSNSアイコンの列間を詰めたいのですが、そちらの方法も教えて頂けますか？お手数おかけして申し訳ありませんが、よろしくお願いいたします。URLは以下になります。

カゲオ カゲオ

ラッコ様

サイト拝見しました。

1つめ、Facebookアイコンについては以下の「b」を取り除けばOKです。

「fab fa-facebook-square」→「fa fa-facebook-square」

2つめ、名前とSNSの列間を詰めるとは、名前側にSNSアイコンを近づけたい認識で合ってますかね？

であれば以下のコードを追記して「20px」部分で調整してください。

style.css
copyする

ul.snsbtniti {
    position: relative;
    bottom: 20px;
}

よろしくお願いします。

アバター ラッコ

ありがとうございます。Facebookのボタンの問題は解決いたしました。
名前側にSNSアイコンを近づけるのができませんでした。そちらのコードを入力したらそのまま本文に入力されてしまいました…。入力する場所が間違っているのでしょうか…。

カゲオ カゲオ

ラッコ様

いえ本文ではなく、style.cssに追加してください。

よろしくお願いします。

アバター なた

はじめまして。今回このページを参考に自分のブログにTwitterのフォローボタンを設置しようとしたのですが、
何回やってもcssがうまく反映されません。原因を教えていただけますか？

サイドバーのSNSフォローはこちらというところです。よろしくお願いします。

カゲオ カゲオ

なた様

サイトを確認したところ、以下のように反映されていますが「Twitter」テキスト部分の位置調整をしたいということでしょうか？

であれば以下の「22px」部分を調整してください。

style.css
copyする

.flowbtn2 div {
    font-size: 11px;
    letter-spacing: 0;
    font-weight: bold;
    position: relative;
    bottom: 22px;
}

おそらく10pxくらいにすれば、いい感じになると思います。

よろしくお願いします。

アバター なた

ありがとうございます！！
ずっと鳩マークと文字だけで、四角の枠が反映されなかったんです。
反映されるまで時間がかかったみたいで、1日経ったら変わってました。
わざわざ、確認してもらって申し訳ありませんでした。

なんと！さらにアドバイスまで！ありがとうございます～。ペコペコ。
早速、変えてみました！！
これからも、参考にさせてもらいます！

カゲオ カゲオ

IS様

該当ページのURLを送っていただけますか？

よろしくお願いします。

カゲオ カゲオ

R様

該当ページのURLを送っていただけますか？

よろしくお願いします。

アバター りゅう

これだけネットに情報があふれていると無料が当たり前なんて考えてる頭の弱い奴も湧いてきますね！
あ、上のffのことですwww
SNSフォローボタン大変参考になりました！
本当にありがとうございます^^

コメントを投稿する
カゲオ カゲオ

りゅう様
暖かいコメントありがとうございます。

参考になった様で何よりです。

今後とも精進していこうと思っていますので、「カゲサイ」をよろしくお願いします。

カゲオ カゲオ

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

コメントはお気軽にどうぞ

※日本語が含まれていないコメントは投稿できません。（スパム対策）