cssで作るシェアボタンのデザインパターン36種類

2017年4月23日

当ページのリンクには広告が含まれています。

cssで作るシェアボタンのデザインパターンをたくさん考えてみました。とりあえずシェア数の表示がない、単純なボタンとして36種類あります。（色違いなども若干含みます。）

記述するhtmlはどれも同じようなものですが、一部微妙に異なるものもあります。基本的にはcssだけでデザインを決めています。アイコンフォントに関してもcssだけでほとんどやっていますが、そのコードは省略していますのでソースを見てください。

コピペでもだいたい使えると思いますが、それぞれ微調整が必要なものもあると思います。なのでコピペだけでなく自分のサイトに合わせて調整できるcss中級者以上向けですね。スマホ表示も考えてないし。（スマホで見ると崩れてるやんwと思う人はこの記事の対象外です。）

というか、ローカルなhtmlで作っていたものをここにコピペしたらうまく動かないものやフォントが反映されていないものがありました。面倒なのでもうそのままにしておきます。~~なんでPocketのアイコンだけ表示されないんだ…？~~

追記：
スマホ…というか表示幅が狭い場合での表示崩れに関しては、メディアクエリなりで対応が必要になります。（そもそも実装する物によって表示幅など条件も変わってくるので）そのあたりの調整が自分でできる人、当たり前に思いつくcss中級者以上向けとなります。

INDEX

バータイプ

1:

Facebook
Twitter
Pocket
Hatebu

<div class="snsbtn1">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
</div>

.snsbtn1{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin:0 0 1em 0;}
.snsbtn1 a{display:block;width:24.5%;padding:0.5em 1em 0.45em 1em;line-height:1;color:#fff;}
.snsbtn1 a i{margin:0 .2em 0 0;}
.snsbtn1 .btn-fb{background:#365899;}
.snsbtn1 .btn-tw{background:#1b95e0;}
.snsbtn1 .btn-po{background:#EF4056;}
.snsbtn1 .btn-hb{background:#008fde;}
.snsbtn1 .btn-fb:hover{background:#4166B0;}
.snsbtn1 .btn-tw:hover{background:#2EA1E9;}
.snsbtn1 .btn-po:hover{background:#F64F64;}
.snsbtn1 .btn-hb:hover{background:#009FF8;}

2:

Facebook
Twitter
Pocket
Hatebu

<div class="snsbtn2">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
</div>

.snsbtn2{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin:0 0 1em 0;}
.snsbtn2 a{display:block;width:24.5%;padding:0.4em 1em 0.25em 0.3em;line-height:1.5;color:#fff;border-radius:4px;}
.snsbtn2 .btn-fb{background:#365899;}
.snsbtn2 .btn-tw{background:#1b95e0;}
.snsbtn2 .btn-po{background:#EF4056;}
.snsbtn2 .btn-hb{background:#008fde;}
.snsbtn2 .btn-fb:hover{background:#4166B0;}
.snsbtn2 .btn-tw:hover{background:#2EA1E9;}
.snsbtn2 .btn-po:hover{background:#F64F64;}
.snsbtn2 .btn-hb:hover{background:#009FF8;}
.snsbtn2 a i{display:inline-block;width:2em;text-align:center;border-right:1px solid #fff;margin:0 0.5em 0 0;padding:0.1em 0 0 0;line-height:1.2;}

3:

Facebook
Twitter
Pocket
Hatebu

<div class="snsbtn3">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
</div>

.snsbtn3{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin:0 0 1em 0;}
.snsbtn3 a{display:block;width:24.5%;padding:1.0em 0 0.9em 0;line-height:1;color:#fff;text-align:center;position:relative;overflow:hidden;font-family:'Montserrat';}
.snsbtn3 .btn-fb{background:#365899;}
.snsbtn3 .btn-tw{background:#1b95e0;}
.snsbtn3 .btn-po{background:#EF4056;}
.snsbtn3 .btn-hb{background:#008fde;}
.snsbtn3 .btn-fb:hover{background:#4166B0;}
.snsbtn3 .btn-tw:hover{background:#2EA1E9;}
.snsbtn3 .btn-po:hover{background:#F64F64;}
.snsbtn3 .btn-hb:hover{background:#009FF8;}
.snsbtn3 a i{position:absolute;top:0.3em;left:-0.25em;font-size:320%;color:rgba(255,255,255,0.3);}
.snsbtn3 .btn-tw i,.snsbtn3 .btn-hb i{top:0.2em;left:-0.2em;}

4:

Facebook
Twitter
Pocket
Hatebu

<div class="snsbtn4">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
</div>

.snsbtn4{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin:0 0 1em 0;}
.snsbtn4 a{display:block;width:24.5%;padding:1em 1.1em 0.95em 1em;line-height:1;color:#fff;font-family:'Montserrat';text-align:center;text-transform:uppercase;transition:0.3s;}
.snsbtn4 a:hover{box-shadow:0px 0px 8px rgba(0,0,0,0.2);}
.snsbtn4 .btn-fb{background:#465f8c;}
.snsbtn4 .btn-tw{background:#3998d4;}
.snsbtn4 .btn-po{background:#e35f71;}
.snsbtn4 .btn-hb{background:#1f93d1;}
.snsbtn4 .btn-fb:hover{background:#4267B2;}
.snsbtn4 .btn-tw:hover{background:#31A3EA;}
.snsbtn4 .btn-po:hover{background:#F65065;}
.snsbtn4 .btn-hb:hover{background:#019FF7;}
.snsbtn4 a i{margin:0 0.15em 0 0;}

5:

Facebook
Twitter
Pocket
Hatebu

<div class="snsbtn5">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
</div>

.snsbtn5{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin:0 0 1em 0;}
.snsbtn5 a{display:block;width:24.5%;padding:1em 1.1em 0.95em 1em;line-height:1;color:#fff;font-family:'Montserrat';text-align:center;text-transform:uppercase;border-radius:8px;transition:0.3s;position:relative;}
.snsbtn5 a:hover{margin:-3px 0 3px 0;}
.snsbtn5 a i{margin:0 .2em 0 0;}
.snsbtn5 .btn-fb{background:#365899;box-shadow:0 6px #2c4266;}
.snsbtn5 .btn-tw{background:#1b95e0;box-shadow:0 6px #267aad;}
.snsbtn5 .btn-po{background:#EF4056;box-shadow:0 6px #bd4656;}
.snsbtn5 .btn-hb{background:#008fde;box-shadow:0 6px #1175ab;}
.snsbtn5 .btn-fb:hover{box-shadow:0 9px #2c4266;}
.snsbtn5 .btn-tw:hover{box-shadow:0 9px #267aad;}
.snsbtn5 .btn-po:hover{box-shadow:0 9px #bd4656;}
.snsbtn5 .btn-hb:hover{box-shadow:0 9px #1175ab;}
.snsbtn5 a:active{margin:2px 0 -2px 0;}
.snsbtn5 .btn-fb:active{background:#365899;box-shadow:0 4px #2c4266;}
.snsbtn5 .btn-tw:active{background:#1b95e0;box-shadow:0 4px #267aad;}
.snsbtn5 .btn-po:active{background:#EF4056;box-shadow:0 4px #bd4656;}
.snsbtn5 .btn-hb:active{background:#008fde;box-shadow:0 4px #1175ab;}

6:

Facebook
Twitter
Pocket
Hatebu
Google+
Line

<div class="snsbtn6">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i> Google+</a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i>Line</a>
</div>

.snsbtn6{display:-webkit-flex;display:flex;margin:0 0 1em 0;}
.snsbtn6 a{display:block;margin:0 0.4em 0 0;padding:0.3em 2.5em 0.25em 0.5em;line-height:1;color:#525252;font-family: 'Fjalla One';background:#f5f5f5;border:1px solid #bbb;border-radius:4px;font-size:90%;}
.snsbtn6 a:hover{color:#252525;background:#f0f0f0;}
.snsbtn6 a i{margin:0 .2em 0 0;}

7:

Facebook
Twitter
Pocket
Hatebu
Google+
Line

<div class="snsbtn7">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i> Google+</a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i>Line</a>
</div>

.snsbtn7{display:-webkit-flex;display:flex;margin:0 0 1em 0;}
.snsbtn7 a{display:block;margin:0 0.4em 0 0;padding:0.3em 2.5em 0.25em 0.5em;line-height:1;color:#fff;font-family:'Fjalla One';background:#595959;border:1px solid #474747;border-radius:4px;font-size:90%;box-shadow:0 1px 0 #999 inset;transition:0.3s;}
.snsbtn7 a:hover{color:#fff;background:#333;box-shadow:0 1px 0 #707070 inset;}
.snsbtn7 a i{margin:0 .2em 0 0;}

8:

Facebook
Twitter
Pocket
Hatebu
Google+

<div class="snsbtn8">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb">Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw">Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po">Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple">Hatebu</a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i> Google+</a>
</div>

.snsbtn8{display:-webkit-flex;display:flex;margin:0 0 1em 0;}
.snsbtn8 a{display:block;margin:0 0.4em 0 0;padding:0.8em 3.5em 0.75em 0.5em;line-height:1;color:#fff;font-family:'Fjalla One';background:#595959;border-left:8px solid #444;transition:0.3s;}
.snsbtn8 a:hover{color:#fff;background:#333;box-shadow:0 1px 0 #707070 inset;}
.snsbtn8 .btn-fb{border-color:#365899;}
.snsbtn8 .btn-tw{border-color:#1b95e0;}
.snsbtn8 .btn-po{border-color:#EF4056;}
.snsbtn8 .btn-hb{border-color:#008fde;}
.snsbtn8 .btn-gp{border-color:#DB4437;}

9:

Facebook
Twitter
Pocket
Hatebu

Google+
Line
読者登録
Feedly

<div class="snsbtn9">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
</div>
<div class="snsbtn9">
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i> Google+</a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i>Line</a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i>読者登録</a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i>Feedly</a>
</div>

.snsbtn9{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin:0 0 1em 0;}
.snsbtn9 a{display:block;width:24.5%;padding:0 1em 0 0;line-height:2.5;color:#fff;background:#666;font-family:'Montserrat';text-transform:uppercase;}
.snsbtn9 a i{display:inline-block;width:2.5em;height:2.5em;line-height:2.5em;text-align:center;margin:0 0.5em 0 0;vertical-align:top;}
.snsbtn9 a i:before{margin:0 0 0 0;}
.snsbtn9 .btn-fb i{background:#365899;}
.snsbtn9 .btn-tw i{background:#1b95e0;}
.snsbtn9 .btn-po i{background:#EF4056;}
.snsbtn9 .btn-hb i{background:#008fde;}
.snsbtn9 .btn-gp i{background:#DB4437;}
.snsbtn9 .btn-li i{background:#00B900;}
.snsbtn9 .btn-fd i{background:#2BB24C;}
.snsbtn9 .btn-bl i{background:#333;}
.snsbtn9 .btn-fb:hover{background:#4166B0;}
.snsbtn9 .btn-tw:hover{background:#2EA1E9;}
.snsbtn9 .btn-po:hover{background:#F64F64;}
.snsbtn9 .btn-hb:hover{background:#009FF8;}
.snsbtn9 .btn-gp:hover{background:#db6d63;}
.snsbtn9 .btn-li:hover{background:#38ba38;}
.snsbtn9 .btn-fd:hover{background:#60b375;}
.snsbtn9 .btn-bl:hover{background:#505050;}

10:

Facebook
Twitter
Pocket
Hatebu

Google+
Line
hatena
Feedly

<div class="snsbtn10">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
</div>
<div class="snsbtn10">
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i> Google+</a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i>Line</a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i>hatena</a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i>Feedly</a>
</div>

.snsbtn10{display:-webkit-flex;display:flex;margin:0 0 1em 0;}
.snsbtn10 a{display:block;padding:1em 1.1em 0.95em 1em;line-height:1;color:#fff;font-family:'Montserrat';text-align:center;text-transform:uppercase;transition:0.3s;flex:1 1;}
.snsbtn10 a:hover{box-shadow:0px 0px 8px rgba(0,0,0,0.2);}
.snsbtn10 .btn-fb{background:#465f8c;}
.snsbtn10 .btn-tw{background:#3998d4;}
.snsbtn10 .btn-po{background:#e35f71;}
.snsbtn10 .btn-hb{background:#1f93d1;}
.snsbtn10 .btn-gp{background:#db6d63;}
.snsbtn10 .btn-li{background:#38ba38;}
.snsbtn10 .btn-fd{background:#60b375;}
.snsbtn10 .btn-bl{background:#505050;}
.snsbtn10 .btn-fb:hover{background:#4267B2;}
.snsbtn10 .btn-tw:hover{background:#31A3EA;}
.snsbtn10 .btn-po:hover{background:#F65065;}
.snsbtn10 .btn-hb:hover{background:#019FF7;}
.snsbtn10 .btn-gp:hover{background:#DB4437;}
.snsbtn10 .btn-li:hover{background:#00B900;}
.snsbtn10 .btn-fd:hover{background:#2BB24C;}
.snsbtn10 .btn-bl:hover{background:#333333;}
.snsbtn10 a i{margin:0 0.15em 0 0;}

11:

Facebook
Twitter
Pocket
Hatebu

<div class="snsbtn11">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
</div>

.snsbtn11{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin:0 0 1em 0;}
.snsbtn11 a{display:block;flex:1 1;padding:1em 1.1em 0.95em 1em;line-height:1;font-family:'Montserrat';text-align:center;text-transform:uppercase;transition:0.3s;position:relative;border:2px solid #333;z-index:2;}
.snsbtn11 a:not(:last-of-type){margin-right:4px;}
.snsbtn11 a::before,.snsbtn16 a::after{content:'';position:absolute;top:50%;width:0;height:0;display:inline-block;z-index:-1;transition:0.2s;}
.snsbtn11 a::before{right:50%;border-radius:50% 0 0 50%;}
.snsbtn11 a::after{left:50%;border-radius:0 50% 50% 0;}
.snsbtn11 a:hover::before,.snsbtn16 a:hover::after{top:0;width:50%;height:100%;border-radius:0;}
.snsbtn11 a.btn-fb::before,.snsbtn16 a.btn-fb::after{background:#bfd6ff;}
.snsbtn11 a.btn-tw::before,.snsbtn16 a.btn-tw::after{background:#afe0ff;}
.snsbtn11 a.btn-po::before,.snsbtn16 a.btn-po::after{background:#fed6db;}
.snsbtn11 a.btn-hb::before,.snsbtn16 a.btn-hb::after{background:#a2deff;}
.snsbtn11 .btn-fb{color:#365899;border-color:#365899;}
.snsbtn11 .btn-tw{color:#1b95e0;border-color:#1b95e0;}
.snsbtn11 .btn-po{color:#EF4056;border-color:#EF4056;}
.snsbtn11 .btn-hb{color:#008fde;border-color:#008fde;}
.snsbtn11 .btn-fb:hover{color:#4267B2;border-color:#4267B2;}
.snsbtn11 .btn-tw:hover{color:#31A3EA;border-color:#31A3EA;}
.snsbtn11 .btn-po:hover{color:#F65065;border-color:#F65065;}
.snsbtn11 .btn-hb:hover{color:#019FF7;border-color:#019FF7;}

12:

Facebook
Twitter
Pocket
Hatebu
Google+
Line
hatena
Feedly

<div class="snsbtn12">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i>Google+</a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i>Line</a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i>hatena</a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i>Feedly</a>
</div>

.snsbtn12{display:-webkit-flex;display:flex;margin:0 0 1em 0;}
.snsbtn12 a{display:block;width:80px;height:15px;margin:0 6px 0 0;padding:2px 1px 1px 24px;text-align:center;line-height:14px;color:#fff;background:#898E79;font-family:'Press Start 2P';text-transform:uppercase;box-shadow:0 0 0 1px #fff inset;border:1px solid #666;overflow:hidden;font-size:5.6px;position:relative;letter-spacing:0.5px;}
.snsbtn12 a i{position:absolute;top:1px;left:1px;display:inline-block;width:20px;height:11px;line-height:11px;font-size:7px;margin:0 0 0 0;border-right:1px solid #fff;}
.snsbtn12 a i:before{margin:0 0 0 0;}
.snsbtn12 .btn-fb i{background:#365899;}
.snsbtn12 .btn-tw i{background:#1b95e0;}
.snsbtn12 .btn-po i{background:#EF4056;}
.snsbtn12 .btn-hb i{background:#008fde;}
.snsbtn12 .btn-gp i{background:#DB4437;}
.snsbtn12 .btn-li i{background:#00B900;}
.snsbtn12 .btn-fd i{background:#2BB24C;}
.snsbtn12 .btn-bl i{background:#333;}
.snsbtn12 .btn-fb:hover{background:#4166B0;}
.snsbtn12 .btn-tw:hover{background:#2EA1E9;}
.snsbtn12 .btn-po:hover{background:#F64F64;}
.snsbtn12 .btn-hb:hover{background:#009FF8;}
.snsbtn12 .btn-gp:hover{background:#db6d63;}
.snsbtn12 .btn-li:hover{background:#38ba38;}
.snsbtn12 .btn-fd:hover{background:#60b375;}
.snsbtn12 .btn-bl:hover{background:#505050;}

13:

Facebook
Twitter
Pocket
Hatebu

Google+
Line
hatena
Feedly

<div class="snsbtn13">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
</div>
<div class="snsbtn13">
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i>Google+</a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i>Line</a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i>hatena</a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i>Feedly</a>
</div>

.snsbtn13{display:-webkit-flex;display:flex;margin:0 0 1em 0;}
.snsbtn13 a{display:block;width:160px;height:30px;margin:0 12px 12px 0;padding:4px 2px 2px 48px;text-align:center;line-height:24px;color:#fff;background:#898E79;font-family:'Press Start 2P';text-transform:uppercase;box-shadow:0 0 0 2px #fff inset;border:2px solid #666;overflow:hidden;font-size:11.2px;position:relative;letter-spacing:1px;}
.snsbtn13 a i{position:absolute;top:2px;left:2px;display:inline-block;width:40px;height:22px;line-height:20px;font-size:14px;margin:0 0 0 0;border-right:2px solid #fff;}
.snsbtn13 a i:before{margin:0 0 0 0;}
.snsbtn13 .btn-fb i{background:#365899;}
.snsbtn13 .btn-tw i{background:#1b95e0;}
.snsbtn13 .btn-po i{background:#EF4056;}
.snsbtn13 .btn-hb i{background:#008fde;}
.snsbtn13 .btn-gp i{background:#DB4437;}
.snsbtn13 .btn-li i{background:#00B900;}
.snsbtn13 .btn-fd i{background:#2BB24C;}
.snsbtn13 .btn-bl i{background:#333;line-height:22px;}
.snsbtn13 .btn-fb:hover{background:#4166B0;}
.snsbtn13 .btn-tw:hover{background:#2EA1E9;}
.snsbtn13 .btn-po:hover{background:#F64F64;}
.snsbtn13 .btn-hb:hover{background:#009FF8;}
.snsbtn13 .btn-gp:hover{background:#db6d63;}
.snsbtn13 .btn-li:hover{background:#38ba38;}
.snsbtn13 .btn-fd:hover{background:#60b375;}
.snsbtn13 .btn-bl:hover{background:#505050;}

14:

Facebook
Twitter
Pocket
Hatebu

<div class="snsbtn14">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
</div>

.snsbtn14{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin:0 0 1em 0;}
.snsbtn14 a{display:block;width:24.5%;padding:0 0 0 3.4em;line-height:2.5;color:#fff;border-radius:1.25em;box-shadow:1px 1px 3px rgba(0,0,0,0.3);transition:0.3s;font-family:'Montserrat';position:relative;}
.snsbtn14 a:hover{box-shadow:1px 1px 4px rgba(0,0,0,0.4);}
.snsbtn14 a i:before{margin:0 0 0 0;}
.snsbtn14 .btn-fb{background:#365899;}
.snsbtn14 .btn-tw{background:#1b95e0;}
.snsbtn14 .btn-po{background:#EF4056;}
.snsbtn14 .btn-hb{background:#008fde;}
.snsbtn14 .btn-fb:hover{background:#4166B0;}
.snsbtn14 .btn-tw:hover{background:#2EA1E9;}
.snsbtn14 .btn-po:hover{background:#F64F64;}
.snsbtn14 .btn-hb:hover{background:#009FF8;}
.snsbtn14 a i{position:absolute;top:-4px;left:0;display:inline-block;width:3em;line-height:3;text-align:center;border-radius:50%;background:#505050;box-shadow:1px 1px 4px rgba(0,0,0,0.3);}
.snsbtn14 .btn-fb i{background:#365899;}
.snsbtn14 .btn-tw i{background:#1b95e0;}
.snsbtn14 .btn-po i{background:#EF4056;}
.snsbtn14 .btn-hb i{background:#008fde;}

15:

Facebook
Twitter
Pocket
Hatebu
Google+
Line

<div class="snsbtn15">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i>Google+</a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i>Line</a>
</div>

.snsbtn15{display:-webkit-flex;display:flex;margin:0 0 1em 0;}
.snsbtn15 a{display:block;margin:0 0.5em 0 0;padding:0 2em 0 0;line-height:22px;height:23px;color:#525252;font-family:'Ubuntu';border:1px solid #bbb;border-radius:4px;font-size:12px;overflow:hidden;background:-moz-linear-gradient(#fafafa, #e0e0e0);background:-webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#e0e0e0));}
.snsbtn15 a:hover{background:-moz-linear-gradient(#fff, #e0e0e0);background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));}
.snsbtn15 a i:before{margin:0 0.4em 0 0;height:100%;line-height:22px;width:2em;height:22px;color:#fff;font-size:90%;vertical-align:top;background:-moz-linear-gradient(#383838, #202020);background:-webkit-gradient(linear, left top, left bottom, from(#383838), to(#202020));}
.snsbtn15 a:hover i:before{background:-moz-linear-gradient(#444, #202020);background:-webkit-gradient(linear, left top, left bottom, from(#444), to(#202020));}

16:

Facebook
Twitter
Pocket
Hatebu
Google+
Line

<div class="snsbtn16">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i>Google+</a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i>Line</a>
</div>

.snsbtn16{display:-webkit-flex;display:flex;margin:0 0 1em 0;}
.snsbtn16 a{display:block;margin:0 0.5em 0 0;padding:0 2em 0 0;line-height:22px;height:23px;color:#525252;font-family:'Ubuntu';border:1px solid #bbb;border-radius:4px;font-size:12px;overflow:hidden;background:-moz-linear-gradient(#fafafa, #e0e0e0);background:-webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#e0e0e0));}
.snsbtn16 a:hover{background:-moz-linear-gradient(#fff, #e0e0e0);background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));}
.snsbtn16 a i:before{margin:0 0.4em 0 0;height:100%;line-height:22px;width:2em;height:22px;color:#fff;font-size:90%;vertical-align:top;}
.snsbtn16 .btn-fb i:before{background:-moz-linear-gradient(#4166B0, #365899);background:-webkit-gradient(linear, left top, left bottom, from(#4166B0), to(#365899));}
.snsbtn16 .btn-fb:hover i:before{background:-moz-linear-gradient(#4b75c9, #4166B0);background:-webkit-gradient(linear, left top, left bottom, from(#4b75c9), to(#4166B0));}
.snsbtn16 .btn-tw i:before{background:-moz-linear-gradient(#2EA1E9, #1b95e0);background:-webkit-gradient(linear, left top, left bottom, from(#2EA1E9), to(#1b95e0));}
.snsbtn16 .btn-tw:hover i:before{background:-moz-linear-gradient(#33b1ff, #2EA1E9);background:-webkit-gradient(linear, left top, left bottom, from(#33b1ff), to(#2EA1E9));}
.snsbtn16 .btn-po i:before{background:-moz-linear-gradient(#F64F64, #EF4056);background:-webkit-gradient(linear, left top, left bottom, from(#F64F64), to(#EF4056));}
.snsbtn16 .btn-po:hover i:before{background:-moz-linear-gradient(#fe6e81, #F64F64);background:-webkit-gradient(linear, left top, left bottom, from(#fe6e81), to(#F64F64));}
.snsbtn16 .btn-hb i:before{background:-moz-linear-gradient(#009FF8, #008fde);background:-webkit-gradient(linear, left top, left bottom, from(#009FF8), to(#008fde));}
.snsbtn16 .btn-hb:hover i:before{background:-moz-linear-gradient(#16abff, #009FF8);background:-webkit-gradient(linear, left top, left bottom, from(#16abff), to(#009FF8));}
.snsbtn16 .btn-gp i:before{background:-moz-linear-gradient(#db6d63, #DB4437);background:-webkit-gradient(linear, left top, left bottom, from(#db6d63), to(#DB4437));}
.snsbtn16 .btn-gp:hover i:before{background:-moz-linear-gradient(#e5796f, #db6d63);background:-webkit-gradient(linear, left top, left bottom, from(#e5796f), to(#db6d63));}
.snsbtn16 .btn-li i:before{background:-moz-linear-gradient(#38ba38, #00B900);background:-webkit-gradient(linear, left top, left bottom, from(#38ba38), to(#00B900));}
.snsbtn16 .btn-li:hover i:before{background:-moz-linear-gradient(#40d43f, #38ba38);background:-webkit-gradient(linear, left top, left bottom, from(#40d43f), to(#38ba38));}
.snsbtn16 .btn-fb{color:#365899;}
.snsbtn16 .btn-fb:hover{color:#4166B0;}
.snsbtn16 .btn-tw{color:#1b95e0;}
.snsbtn16 .btn-tw:hover{color:#2EA1E9;}
.snsbtn16 .btn-po{color:#EF4056;}
.snsbtn16 .btn-po:hover{color:#F64F64;}
.snsbtn16 .btn-hb{color:#008fde;}
.snsbtn16 .btn-hb:hover{color:#009FF8;}
.snsbtn16 .btn-gp{color:#DB4437;}
.snsbtn16 .btn-gp:hover{color:#db6d63;}
.snsbtn16 .btn-li{color:#00B900;}
.snsbtn16 .btn-li:hover{color:#38ba38;}

17:

<div class="snsbtn17">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook">Facebook</i></a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter">Twitter</i></a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu">Hatebu</i></a>
</div>

.snsbtn17{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin:0 0 1em 0;}
.snsbtn17 a{display:block;flex:1 1;padding:0.5em;line-height:1;color:#d8d8d8;font-family:'Montserrat';text-align:center;text-transform:uppercase;transition:0.3s;position:relative;border:1px solid #e0e0e0;border-radius:6px;background:-moz-linear-gradient(#e0e0e0, #f8f8f8);background:-webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#f8f8f8));}
.snsbtn17 a:not(:last-of-type){margin-right:8px;}
.snsbtn17 i{text-shadow:1px 1px rgba(255,255,255,0.6),-1px -1px rgba(0,0,0,0.3);display:block;font-style:normal;padding:0.9em 0 0.8em 0;border-radius:4px;background:-moz-linear-gradient(#f8f8f8, #e0e0e0);background:-webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#e0e0e0));box-shadow:0 1px 4px rgba(0,0,0,0.5),0 1px 2px #fff inset;}
.snsbtn17 i::before{margin:0 .2em 0 0;}
.snsbtn17 .btn-fb:hover{color:#7492cc;}
.snsbtn17 .btn-tw:hover{color:#69c5ff;}
.snsbtn17 .btn-hb:hover{color:#36b8ff;}

18:

<div class="snsbtn18">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook">Facebook</i></a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter">Twitter</i></a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu">Hatebu</i></a>
</div>

.snsbtn18{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin:0 0 1em 0;}
.snsbtn18 a{display:block;flex:1 1;padding:0.5em;line-height:1;color:#505050;font-family:'Montserrat';text-align:center;text-transform:uppercase;transition:0.3s;position:relative;border:1px solid #e0e0e0;border-radius:6px;background:-moz-linear-gradient(#e0e0e0, #f8f8f8);background:-webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#f8f8f8));}
.snsbtn18 a:not(:last-of-type){margin-right:8px;}
.snsbtn18 i{text-shadow:1px 1px rgba(255,255,255,0.2),-1px -1px rgba(0,0,0,0.3);display:block;font-style:normal;padding:0.9em 0 0.8em 0;border-radius:4px;background:-moz-linear-gradient(#404040, #202020);background:-webkit-gradient(linear, left top, left bottom, from(#404040), to(#202020));box-shadow:0 1px 4px rgba(0,0,0,0.5),0 1px 2px #fff inset;}
.snsbtn18 i::before{margin:0 .2em 0 0;}
.snsbtn18 .btn-fb:hover{color:#384866;}
.snsbtn18 .btn-tw:hover{color:#2f6d94;}
.snsbtn18 .btn-hb:hover{color:#1d6991;}

スクエアタイプ

19:

<div class="snsbtn19">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i></a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i></a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i></a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i></a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i></a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i></a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i></a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i></a>
</div>

.snsbtn19{margin:0 0 1em 0;}
.snsbtn19 a{display:inline-block;width:48px;height:48px;margin:0 8px 0 0;line-height:48px;color:#fff;text-align:center;}
.snsbtn19 a i{vertical-align:top;}
.snsbtn19 a i:before{margin:0 0 0 0;display:inline-block;font-size:20px;line-height:48px;}
.snsbtn19 .btn-fb{background:#365899;}
.snsbtn19 .btn-tw{background:#1b95e0;}
.snsbtn19 .btn-po{background:#EF4056;}
.snsbtn19 .btn-hb{background:#008fde;}
.snsbtn19 .btn-gp{background:#DB4437;}
.snsbtn19 .btn-li{background:#00B900;}
.snsbtn19 .btn-fd{background:#2BB24C;}
.snsbtn19 .btn-bl{background:#333;}
.snsbtn19 .btn-fb:hover{background:#4166B0;}
.snsbtn19 .btn-tw:hover{background:#2EA1E9;}
.snsbtn19 .btn-po:hover{background:#F64F64;}
.snsbtn19 .btn-hb:hover{background:#009FF8;}
.snsbtn19 .btn-gp:hover{background:#db6d63;}
.snsbtn19 .btn-li:hover{background:#38ba38;}
.snsbtn19 .btn-fd:hover{background:#60b375;}
.snsbtn19 .btn-bl:hover{background:#505050;}

20:

Facebook
Twitter
Pocket
Hatebu
Google+
Line
hatena
Feedly

<div class="snsbtn20">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i>Google+</a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i>Line</a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i>hatena</a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i>Feedly</a>
</div>

.snsbtn20{display:-webkit-flex;display:flex;margin:0 0 1em 0;}
.snsbtn20 a{display:block;width:60px;height:60px;margin:0 12px 12px 0;text-align:center;text-transform:uppercase;color:#fff;font-size:9.5px;font-family:'Montserrat';}
.snsbtn20 a i{display:block;line-height:32px;font-size:24px;margin:0 0 0 0;padding:6px 0 0 0;vertical-align:middle;}
.snsbtn20 a i::before{margin:0 0 0 0;}
.snsbtn20 a:hover{animation: rumble 0.3s linear infinite;}
.snsbtn20 .btn-fb{background:#365899;}
.snsbtn20 .btn-tw{background:#1b95e0;}
.snsbtn20 .btn-po{background:#EF4056;}
.snsbtn20 .btn-hb{background:#008fde;}
.snsbtn20 .btn-gp{background:#DB4437;}
.snsbtn20 .btn-li{background:#00B900;}
.snsbtn20 .btn-fd{background:#2BB24C;}
.snsbtn20 .btn-bl{background:#333333;}
.snsbtn20 .btn-fb:hover{background:#4166B0;}
.snsbtn20 .btn-tw:hover{background:#2EA1E9;}
.snsbtn20 .btn-po:hover{background:#F64F64;}
.snsbtn20 .btn-hb:hover{background:#009FF8;}
.snsbtn20 .btn-gp:hover{background:#db6d63;}
.snsbtn20 .btn-li:hover{background:#38ba38;}
.snsbtn20 .btn-fd:hover{background:#60b375;}
.snsbtn20 .btn-bl:hover{background:#505050;}
@keyframes rumble{
0% {transform:rotate(0deg)  translate(0,0);}
12.5%  {transform:rotate(0.4deg)    translate(1px,-1px);}
25%    {transform:rotate(0.8deg)    translate(0px,1px);}
37.5%  {transform:rotate(0.4deg)    translate(-1px,0);}
50%    {transform:rotate(0deg)  translate(0,0);}
62.5%  {transform:rotate(-0.4deg)   translate(1px,0);}
75%    {transform:rotate(-0.8deg)   translate(0,1px);}
87.5%  {transform:rotate(-0.4deg)   translate(-1px,-1px);}
100%   {transform:rotate(0deg)  translate(0,0);}
}

21:

<div class="snsbtn21">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i></a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i></a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i></a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i></a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i></a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i></a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i></a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i></a>
</div>

.snsbtn21{margin:0 0 1em 0;}
.snsbtn21 a{display:inline-block;width:54px;height:54px;margin:0 6px 0 0;line-height:54px;color:#fff;text-align:center;border-radius:6px;box-shadow:1px 1px 3px rgba(0,0,0,0.3);transition:0.3s;}
.snsbtn21 a i:before{margin:0 0 0 0;display:inline-block;font-size:20px;line-height:54px;}
.snsbtn21 a i{vertical-align:top;}
.snsbtn21 a:hover{box-shadow:1px 1px 4px rgba(0,0,0,0.6);}
.snsbtn21 .btn-fb{background:#365899;}
.snsbtn21 .btn-tw{background:#1b95e0;}
.snsbtn21 .btn-po{background:#EF4056;}
.snsbtn21 .btn-hb{background:#008fde;}
.snsbtn21 .btn-gp{background:#DB4437;}
.snsbtn21 .btn-li{background:#00B900;}
.snsbtn21 .btn-fd{background:#2BB24C;}
.snsbtn21 .btn-bl{background:#333;}
.snsbtn21 .btn-fb:hover{background:#4166B0;}
.snsbtn21 .btn-tw:hover{background:#2EA1E9;}
.snsbtn21 .btn-po:hover{background:#F64F64;}
.snsbtn21 .btn-hb:hover{background:#009FF8;}
.snsbtn21 .btn-gp:hover{background:#db6d63;}
.snsbtn21 .btn-li:hover{background:#38ba38;}
.snsbtn21 .btn-fd:hover{background:#60b375;}
.snsbtn21 .btn-bl:hover{background:#505050;}

22:

Facebook
Twitter
Pocket
Hatebu
Google+
Line
hatena
Feedly

<div class="snsbtn22">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i>Google+</a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i>Line</a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i>hatena</a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i>Feedly</a>
</div>

.snsbtn22{display:-webkit-flex;display:flex;margin:0 0 1em 0;}
.snsbtn22 a{display:block;width:60px;height:60px;margin:0 12px 12px 0;text-align:center;text-transform:uppercase;font-size:9.5px;font-family:'Montserrat';border:2px solid #333;transition:0.3s;}
.snsbtn22 a i{display:block;line-height:32px;font-size:24px;margin:0 0 0 0;padding:6px 0 0 0;vertical-align:middle;}
.snsbtn22 a i::before{margin:0 0 0 0;}
.snsbtn22 .btn-fb{border-color:#365899;color:#365899;}
.snsbtn22 .btn-tw{border-color:#1b95e0;color:#1b95e0;}
.snsbtn22 .btn-po{border-color:#EF4056;color:#EF4056;}
.snsbtn22 .btn-hb{border-color:#008fde;color:#008fde;}
.snsbtn22 .btn-gp{border-color:#DB4437;color:#DB4437;}
.snsbtn22 .btn-li{border-color:#00B900;color:#00B900;}
.snsbtn22 .btn-fd{border-color:#2BB24C;color:#2BB24C;}
.snsbtn22 .btn-bl{border-color:#333333;color:#333333;}
.snsbtn22 a:hover{color:#fff;transform:rotate(360deg);}
.snsbtn22 .btn-fb:hover{background:#365899;}
.snsbtn22 .btn-tw:hover{background:#1b95e0;}
.snsbtn22 .btn-po:hover{background:#EF4056;}
.snsbtn22 .btn-hb:hover{background:#008fde;}
.snsbtn22 .btn-gp:hover{background:#DB4437;}
.snsbtn22 .btn-li:hover{background:#00B900;}
.snsbtn22 .btn-fd:hover{background:#2BB24C;}
.snsbtn22 .btn-bl:hover{background:#333333;}

23:

Facebook
Twitter
Pocket
Hatebu
Google+
Line
Hatena
Feedly

<div class="snsbtn23">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i><span>Facebook</span></a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i><span>Twitter</span></a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i><span>Pocket</span></a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i><span>Hatebu</span></a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i><span>Google+</span></a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i><span>Line</span></a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i><span>Hatena</span></a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i><span>Feedly</span></a>
</div>

.snsbtn23{display:-webkit-flex;display:flex;margin:0 0 1em 0;}
.snsbtn23 a{display:block;width:60px;height:60px;margin:0 12px 12px 0;text-align:center;text-transform:uppercase;font-size:9.2px;font-family:'Montserrat';color:#999;border:1px solid #999;transition:0.5s;border-radius:3px;}
.snsbtn23 a i{display:block;line-height:32px;font-size:24px;margin:0 0 0 0;padding:5px 0 0 0;vertical-align:middle;}
.snsbtn23 a i::before{margin:0 0 0 0;}
.snsbtn23 a span{display:block;margin:1px 2px 0 2px;padding:1px;border-radius:2px;transition:0.5s;}
.snsbtn23 .btn-fb span{letter-spacing:-0.5px;}
.snsbtn23 .btn-fb:hover{border-color:#4166B0;color:#4166B0;}
.snsbtn23 .btn-tw:hover{border-color:#2EA1E9;color:#2EA1E9;}
.snsbtn23 .btn-po:hover{border-color:#F64F64;color:#F64F64;}
.snsbtn23 .btn-hb:hover{border-color:#009FF8;color:#009FF8;}
.snsbtn23 .btn-gp:hover{border-color:#db6d63;color:#db6d63;}
.snsbtn23 .btn-li:hover{border-color:#38ba38;color:#38ba38;}
.snsbtn23 .btn-fd:hover{border-color:#60b375;color:#60b375;}
.snsbtn23 .btn-bl:hover{border-color:#505050;color:#505050;}
.snsbtn23 a:hover span{color:#fff;}
.snsbtn23 .btn-fb:hover span{background:#4166B0;}
.snsbtn23 .btn-tw:hover span{background:#2EA1E9;}
.snsbtn23 .btn-po:hover span{background:#F64F64;}
.snsbtn23 .btn-hb:hover span{background:#009FF8;}
.snsbtn23 .btn-gp:hover span{background:#db6d63;}
.snsbtn23 .btn-li:hover span{background:#38ba38;}
.snsbtn23 .btn-fd:hover span{background:#60b375;}
.snsbtn23 .btn-bl:hover span{background:#505050;}

24:

Facebook
Twitter
Pocket
Hatebu
Google+
Line
hatena
Feedly

<div class="snsbtn24">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><span>Facebook</span><i class="icon-facebook"></i></a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><span>Twitter</span><i class="icon-twitter"></i></a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><span>Pocket</span><i class="icon-get-pocket"></i></a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><span>Hatebu</span><i class="icon-hatebu"></i></a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><span>Google+</span><i class="icon-gplus"></i></a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><span>Line</span><i class="icon-line"></i></a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><span>hatena</span><i class="blogicon-hatenablog"></i></a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><span>Feedly</span><i class="icon-feedly"></i></a>
</div>

.snsbtn24{display:-webkit-flex;display:flex;-webkit-justify-content:space-around;justify-content:space-around;margin:0 0 1em 0;}
.snsbtn24 a{display:block;width:74px;height:74px;margin:0 0 12px 0;text-align:center;border-radius:8px;background:#fff;overflow:hidden;box-shadow:1px 1px 4px rgba(0,0,0,0.4);transition:0.5s;}
.snsbtn24 a:hover{box-shadow:1px 1px 5px rgba(0,0,0,0.55);}
.snsbtn24 a i{display:block;line-height:54px;font-size:24px;margin:0 0 0 0;vertical-align:middle;transition:0.5s;}
.snsbtn24 a i::before{margin:0 0 0 0;}
.snsbtn24 a span{display:block;margin:0 0 0 0;text-transform:uppercase;font-size:9.5px;font-family:'Montserrat';line-height:20px;color:#fff;transition:0.5s;}
.snsbtn24 .btn-fb span{background:#365899;}
.snsbtn24 .btn-tw span{background:#1b95e0;}
.snsbtn24 .btn-po span{background:#EF4056;}
.snsbtn24 .btn-hb span{background:#008fde;}
.snsbtn24 .btn-gp span{background:#DB4437;}
.snsbtn24 .btn-li span{background:#00B900;}
.snsbtn24 .btn-fd span{background:#2BB24C;}
.snsbtn24 .btn-bl span{background:#333333;}
.snsbtn24 .btn-fb:hover span{background:#4166B0;}
.snsbtn24 .btn-tw:hover span{background:#2EA1E9;}
.snsbtn24 .btn-po:hover span{background:#F64F64;}
.snsbtn24 .btn-hb:hover span{background:#009FF8;}
.snsbtn24 .btn-gp:hover span{background:#db6d63;}
.snsbtn24 .btn-li:hover span{background:#38ba38;}
.snsbtn24 .btn-fd:hover span{background:#60b375;}
.snsbtn24 .btn-bl:hover span{background:#505050;}
.snsbtn24 .btn-fb i{color:#365899;}
.snsbtn24 .btn-tw i{color:#1b95e0;}
.snsbtn24 .btn-po i{color:#EF4056;}
.snsbtn24 .btn-hb i{color:#008fde;}
.snsbtn24 .btn-gp i{color:#DB4437;}
.snsbtn24 .btn-li i{color:#00B900;}
.snsbtn24 .btn-fd i{color:#2BB24C;}
.snsbtn24 .btn-bl i{color:#333333;}
.snsbtn24 .btn-fb:hover i{color:#4166B0;}
.snsbtn24 .btn-tw:hover i{color:#2EA1E9;}
.snsbtn24 .btn-po:hover i{color:#F64F64;}
.snsbtn24 .btn-hb:hover i{color:#009FF8;}
.snsbtn24 .btn-gp:hover i{color:#db6d63;}
.snsbtn24 .btn-li:hover i{color:#38ba38;}
.snsbtn24 .btn-fd:hover i{color:#60b375;}
.snsbtn24 .btn-bl:hover i{color:#505050;}

25:

Facebook
Twitter
Pocket
Hatebu
Google+
Line
読者登録
Feedly

<div class="snsbtn25">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i> Google+</a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i>Line</a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i>読者登録</a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i>Feedly</a>
</div>

.snsbtn25{display:-webkit-flex;display:flex;margin:0 0 1em 0;}
.snsbtn25 a{display:inline-block;width:2.5em;overflow:hidden;line-height:2.5;color:#fff;font-family:'Montserrat';text-transform:uppercase;flex-basis:2.5em;white-space:nowrap;transition:0.3s;}
.snsbtn25 a i{display:inline-block;width:2.5em;height:2.5em;line-height:2.5em;text-align:center;vertical-align:top;}
.snsbtn25 a i:before{margin:0 0 0 0;}
.snsbtn25 a:hover{flex-basis:150px;}
.snsbtn25 .btn-fb{background:#365899;}
.snsbtn25 .btn-tw{background:#1b95e0;}
.snsbtn25 .btn-po{background:#EF4056;}
.snsbtn25 .btn-hb{background:#008fde;}
.snsbtn25 .btn-gp{background:#DB4437;}
.snsbtn25 .btn-li{background:#00B900;}
.snsbtn25 .btn-fd{background:#2BB24C;}
.snsbtn25 .btn-bl{background:#333333;}

26:

<div class="snsbtn26">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i></a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i></a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i></a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i></a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i></a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i></a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i></a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i></a>
</div>

.snsbtn26{margin:0 0 1em 0;}
.snsbtn26 a{display:inline-block;width:78px;height:32px;margin:0 4px 0 0;line-height:32px;color:#fff;text-align:center;border-radius:6px;box-shadow:1px 1px 3px rgba(0,0,0,0.3);transition:0.3s;}
.snsbtn26 a i:before{margin:0 0 0 0;display:inline-block;font-size:18px;line-height:32px;}
.snsbtn26 a i{vertical-align:top;}
.snsbtn26 a:hover{box-shadow:1px 1px 4px rgba(0,0,0,0.6);}
.snsbtn26 .btn-fb{background:-moz-linear-gradient(#4166B0, #365899);background:-webkit-gradient(linear, left top, left bottom, from(#4166B0), color-stop(0.5, #4166B0), color-stop(0.5, #365899), to(#365899));}
.snsbtn26 .btn-tw{background:-moz-linear-gradient(#2EA1E9, #1b95e0);background:-webkit-gradient(linear, left top, left bottom, from(#2EA1E9), color-stop(0.5, #2EA1E9), color-stop(0.5, #1b95e0), to(#1b95e0));}
.snsbtn26 .btn-po{background:-moz-linear-gradient(#F64F64, #EF4056);background:-webkit-gradient(linear, left top, left bottom, from(#F64F64), color-stop(0.5, #F64F64), color-stop(0.5, #EF4056), to(#EF4056));}
.snsbtn26 .btn-hb{background:-moz-linear-gradient(#009FF8, #008fde);background:-webkit-gradient(linear, left top, left bottom, from(#009FF8), color-stop(0.5, #009FF8), color-stop(0.5, #008fde), to(#008fde));}
.snsbtn26 .btn-gp{background:-moz-linear-gradient(#db6d63, #DB4437);background:-webkit-gradient(linear, left top, left bottom, from(#db6d63), color-stop(0.5, #db6d63), color-stop(0.5, #DB4437), to(#DB4437));}
.snsbtn26 .btn-li{background:-moz-linear-gradient(#38ba38, #00B900);background:-webkit-gradient(linear, left top, left bottom, from(#38ba38), color-stop(0.5, #38ba38), color-stop(0.5, #00B900), to(#00B900));}
.snsbtn26 .btn-fd{background:-moz-linear-gradient(#60b375, #2BB24C);background:-webkit-gradient(linear, left top, left bottom, from(#60b375), color-stop(0.5, #60b375), color-stop(0.5, #2BB24C), to(#2BB24C));}
.snsbtn26 .btn-bl{background:-moz-linear-gradient(#505050, #333333);background:-webkit-gradient(linear, left top, left bottom, from(#505050), color-stop(0.5, #505050), color-stop(0.5, #333333), to(#333333));}
.snsbtn26 .btn-fb:hover{background:-moz-linear-gradient(#4e76c5, #4166B0);background:-webkit-gradient(linear, left top, left bottom, from(#4e76c5), color-stop(0.5, #4e76c5), color-stop(0.5, #4166B0), to(#4166B0));}
.snsbtn26 .btn-tw:hover{background:-moz-linear-gradient(#37a9f0, #2EA1E9);background:-webkit-gradient(linear, left top, left bottom, from(#37a9f0), color-stop(0.5, #37a9f0), color-stop(0.5, #2EA1E9), to(#2EA1E9));}
.snsbtn26 .btn-po:hover{background:-moz-linear-gradient(#fb5f73, #F64F64);background:-webkit-gradient(linear, left top, left bottom, from(#fb5f73), color-stop(0.5, #fb5f73), color-stop(0.5, #F64F64), to(#F64F64));}
.snsbtn26 .btn-hb:hover{background:-moz-linear-gradient(#0fa8fd, #009FF8);background:-webkit-gradient(linear, left top, left bottom, from(#0fa8fd), color-stop(0.5, #0fa8fd), color-stop(0.5, #009FF8), to(#009FF8));}
.snsbtn26 .btn-gp:hover{background:-moz-linear-gradient(#e57c73, #db6d63);background:-webkit-gradient(linear, left top, left bottom, from(#e57c73), color-stop(0.5, #e57c73), color-stop(0.5, #db6d63), to(#db6d63));}
.snsbtn26 .btn-li:hover{background:-moz-linear-gradient(#41c241, #38ba38);background:-webkit-gradient(linear, left top, left bottom, from(#41c241), color-stop(0.5, #41c241), color-stop(0.5, #38ba38), to(#38ba38));}
.snsbtn26 .btn-fd:hover{background:-moz-linear-gradient(#6cbe81, #60b375);background:-webkit-gradient(linear, left top, left bottom, from(#6cbe81), color-stop(0.5, #6cbe81), color-stop(0.5, #60b375), to(#60b375));}
.snsbtn26 .btn-bl:hover{background:-moz-linear-gradient(#666666, #505050);background:-webkit-gradient(linear, left top, left bottom, from(#666666), color-stop(0.5, #666666), color-stop(0.5, #505050), to(#505050));}

27:

<div class="snsbtn27">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i></a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i></a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i></a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i></a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i></a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i></a>
</div>

.snsbtn27{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin:0 0 1em 0;}
.snsbtn27 a{display:block;width:110px;height:20px;text-align:center;color:#fff;font-size:13px;line-height:20px;font-family:'Ubuntu';border-radius:15px;position:relative;transition:0.3s;}
.snsbtn27 a i{display:inline-block;margin:0 0 0 0;padding:0 0 0 0;vertical-align:top;}
.snsbtn27 a i::before{margin:0 0 0 0;}
.snsbtn27 .btn-fb{background:#365899;}
.snsbtn27 .btn-tw{background:#1b95e0;}
.snsbtn27 .btn-po{background:#EF4056;}
.snsbtn27 .btn-hb{background:#008fde;}
.snsbtn27 .btn-gp{background:#DB4437;}
.snsbtn27 .btn-li{background:#00B900;}
.snsbtn27 a:hover{opacity:0.9;}

28:

Facebook
Twitter
Pocket
Hatebu
Google+
Line

<div class="snsbtn28">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i>Facebook</a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i>Twitter</a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i>Pocket</a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i>Hatebu</a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i>Google+</a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i>Line</a>
</div>

.snsbtn28{display:-webkit-flex;display:flex;margin:0 0 1em 0;}
.snsbtn28 a{display:block;width:96px;height:60px;margin:0 12px 12px 0;text-align:center;text-transform:uppercase;color:#fff;font-size:11px;font-family:'Montserrat';border-radius:6px;position:relative;transition:0.3s;}
.snsbtn28 a i{display:block;line-height:32px;font-size:20px;margin:0 0 0 0;padding:6px 0 0 0;vertical-align:middle;}
.snsbtn28 a i::before{margin:0 0 0 0;}
.snsbtn28 .btn-fb{background:#365899;box-shadow:0 6px 0 #243b66;}
.snsbtn28 .btn-tw{background:#1b95e0;box-shadow:0 6px 0 #1573ad;}
.snsbtn28 .btn-po{background:#EF4056;box-shadow:0 6px 0 #bd3345;}
.snsbtn28 .btn-hb{background:#008fde;box-shadow:0 6px 0 #006fab;}
.snsbtn28 .btn-gp{background:#DB4437;box-shadow:0 6px 0 #a8352a;}
.snsbtn28 .btn-li{background:#00B900;box-shadow:0 6px 0 #008700;}
.snsbtn28 a:hover{opacity:0.9;margin-top:-6px;}
.snsbtn28 a:active{opacity:0.9;margin-top:2px;margin-bottom:-2px;}
.snsbtn28 .btn-fb:hover{box-shadow:0 12px 0 #243b66;}
.snsbtn28 .btn-tw:hover{box-shadow:0 12px 0 #1573ad;}
.snsbtn28 .btn-po:hover{box-shadow:0 12px 0 #bd3345;}
.snsbtn28 .btn-hb:hover{box-shadow:0 12px 0 #006fab;}
.snsbtn28 .btn-gp:hover{box-shadow:0 12px 0 #a8352a;}
.snsbtn28 .btn-li:hover{box-shadow:0 12px 0 #008700;}
.snsbtn28 .btn-fb:active{box-shadow:0 4px 0 #243b66;}
.snsbtn28 .btn-tw:active{box-shadow:0 4px 0 #1573ad;}
.snsbtn28 .btn-po:active{box-shadow:0 4px 0 #bd3345;}
.snsbtn28 .btn-hb:active{box-shadow:0 4px 0 #006fab;}
.snsbtn28 .btn-gp:active{box-shadow:0 4px 0 #a8352a;}
.snsbtn28 .btn-li:active{box-shadow:0 4px 0 #008700;}

29:

<div class="snsbtn29">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i></a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i></a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i></a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i></a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i></a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i></a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i></a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i></a>
</div>

.snsbtn29{margin:0 0 1em 0;}
.snsbtn29 a{display:inline-block;width:54px;height:54px;margin:0px 6px 0 0;line-height:54px;color:#fff;text-align:center;box-shadow:4px 4px rgba(0,0,0,0.1);transition:0.3s;position:relative;}
.snsbtn29 a i:before{margin:0 0 0 0;display:inline-block;font-size:20px;line-height:54px;}
.snsbtn29 a i{vertical-align:top;}
.snsbtn29 a:hover{box-shadow:6px 6px rgba(0,0,0,0.2);margin:0px 7px 0 -1px;}
.snsbtn29 .btn-fb{background:#365899;}
.snsbtn29 .btn-tw{background:#1b95e0;}
.snsbtn29 .btn-po{background:#EF4056;}
.snsbtn29 .btn-hb{background:#008fde;}
.snsbtn29 .btn-gp{background:#DB4437;}
.snsbtn29 .btn-li{background:#00B900;}
.snsbtn29 .btn-fd{background:#2BB24C;}
.snsbtn29 .btn-bl{background:#333;}
.snsbtn29 a:hover{opacity:0.9;}

30:

<div class="snsbtn30">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i></a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i></a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i></a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i></a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i></a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i></a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i></a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i></a>
</div>

.snsbtn30{margin:0 0 1em 0;}
.snsbtn30 a{display:inline-block;width:74px;height:48px;margin:0px 6px 0 0;line-height:48px;color:#fff;text-align:center;transition:0.3s;position:relative;border-radius:3px;}
.snsbtn30 a i:before{margin:0 0 0 0;display:inline-block;font-size:32px;line-height:48px;}
.snsbtn30 a i{vertical-align:top;}
.snsbtn30 a::after{content:'';position:absolute;top:100%;left:calc(50% - 12px);color:#f90;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid #f00;}
.snsbtn30 .btn-fb{background:#365899;}
.snsbtn30 .btn-tw{background:#1b95e0;}
.snsbtn30 .btn-po{background:#EF4056;}
.snsbtn30 .btn-hb{background:#008fde;}
.snsbtn30 .btn-gp{background:#DB4437;}
.snsbtn30 .btn-li{background:#00B900;}
.snsbtn30 .btn-fd{background:#2BB24C;}
.snsbtn30 .btn-bl{background:#333;}
.snsbtn30 .btn-fb::after{border-top-color:#365899;}
.snsbtn30 .btn-tw::after{border-top-color:#1b95e0;}
.snsbtn30 .btn-po::after{border-top-color:#EF4056;}
.snsbtn30 .btn-hb::after{border-top-color:#008fde;}
.snsbtn30 .btn-gp::after{border-top-color:#DB4437;}
.snsbtn30 .btn-li::after{border-top-color:#00B900;}
.snsbtn30 .btn-fd::after{border-top-color:#2BB24C;}
.snsbtn30 .btn-bl::after{border-top-color:#333;}
.snsbtn30 a:hover{opacity:0.9;}

31:

<div class="snsbtn31">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i></a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i></a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i></a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i></a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i></a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i></a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i></a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i></a>
</div>

.snsbtn31{display:-webkit-flex;display:flex;margin:0 0 1em 0;}
.snsbtn31 a{display:block;width:64px;height:64px;margin:0 12px 12px 0;padding:6px;text-align:center;transition:0.3s;box-shadow:4px 4px 0px 2px rgba(0,0,0,0.15);color:#fff;}
.snsbtn31 a i{display:block;line-height:53px;width:52px;height:52px;font-size:20px;margin:0 0 0 0;padding:0 0 0 0;vertical-align:top;box-shadow:2px 2px 0px 2px rgba(0,0,0,0.15) inset;}
.snsbtn31 a i::before{margin:0 0 0 0;}
.snsbtn31 a:hover{text-shadow:1px 1px 3px rgba(0,0,0,0.5);box-shadow:3px 3px 12px 1px rgba(0,0,0,0.35);}
.snsbtn31 .btn-fb{background:#4987a3;}
.snsbtn31 .btn-tw{background:#32dae3;}
.snsbtn31 .btn-po{background:#fe8292;}
.snsbtn31 .btn-hb{background:#1bdde0;}
.snsbtn31 .btn-gp{background:#cb8781;}
.snsbtn31 .btn-li{background:#56e49c;}
.snsbtn31 .btn-fd{background:#62d17d;}
.snsbtn31 .btn-bl{background:#505050;}
.snsbtn31 .btn-fb i{background:#365899;}
.snsbtn31 .btn-tw i{background:#1b95e0;}
.snsbtn31 .btn-po i{background:#EF4056;}
.snsbtn31 .btn-hb i{background:#008fde;}
.snsbtn31 .btn-gp i{background:#DB4437;}
.snsbtn31 .btn-li i{background:#00B900;}
.snsbtn31 .btn-fd i{background:#2BB24C;}
.snsbtn31 .btn-bl i{background:#333333;}

サークルタイプ

32:

<div class="snsbtn32">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i></a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i></a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i></a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i></a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i></a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i></a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i></a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i></a>
</div>

,snsbtn32{margin:0 0 1em 0;}
.snsbtn32 a{display:inline-block;width:48px;height:48px;margin:0 8px 0 0;line-height:48px;color:#fff;text-align:center;border-radius:50%;}
.snsbtn32 a i:before{margin:0 0 0 0;display:inline-block;font-size:20px;line-height:48px;}
.snsbtn32 a i{vertical-align:top;}
.snsbtn32 .btn-fb{background:#365899;}
.snsbtn32 .btn-tw{background:#1b95e0;}
.snsbtn32 .btn-po{background:#EF4056;}
.snsbtn32 .btn-hb{background:#008fde;}
.snsbtn32 .btn-gp{background:#DB4437;}
.snsbtn32 .btn-li{background:#00B900;}
.snsbtn32 .btn-fd{background:#2BB24C;}
.snsbtn32 .btn-bl{background:#333;}
.snsbtn32 .btn-fb:hover{background:#4166B0;}
.snsbtn32 .btn-tw:hover{background:#2EA1E9;}
.snsbtn32 .btn-po:hover{background:#F64F64;}
.snsbtn32 .btn-hb:hover{background:#009FF8;}
.snsbtn32 .btn-gp:hover{background:#db6d63;}
.snsbtn32 .btn-li:hover{background:#38ba38;}
.snsbtn32 .btn-fd:hover{background:#60b375;}
.snsbtn32 .btn-bl:hover{background:#505050;}

33:

<div class="snsbtn33">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i></a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i></a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i></a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i></a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i></a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i></a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i></a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i></a>
</div>

.snsbtn33{margin:0 0 1em 0;}
.snsbtn33 a{display:inline-block;width:48px;height:48px;margin:0 8px 0 0;line-height:48px;color:#fff;text-align:center;border-radius:50% 50% 50% 0;}
.snsbtn33 a i:before{margin:1px 1px 0 0;display:inline-block;font-size:20px;line-height:48px;}
.snsbtn33 a i{vertical-align:top;}
.snsbtn33 .btn-fb{background:#365899;}
.snsbtn33 .btn-tw{background:#1b95e0;}
.snsbtn33 .btn-po{background:#EF4056;}
.snsbtn33 .btn-hb{background:#008fde;}
.snsbtn33 .btn-gp{background:#DB4437;}
.snsbtn33 .btn-li{background:#00B900;}
.snsbtn33 .btn-fd{background:#2BB24C;}
.snsbtn33 .btn-bl{background:#333;}
.snsbtn33 .btn-fb:hover{background:#4166B0;}
.snsbtn33 .btn-tw:hover{background:#2EA1E9;}
.snsbtn33 .btn-po:hover{background:#F64F64;}
.snsbtn33 .btn-hb:hover{background:#009FF8;}
.snsbtn33 .btn-gp:hover{background:#db6d63;}
.snsbtn33 .btn-li:hover{background:#38ba38;}
.snsbtn33 .btn-fd:hover{background:#60b375;}
.snsbtn33 .btn-bl:hover{background:#505050;}

34:

<div class="snsbtn34">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i></a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i></a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i></a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i></a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i></a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i></a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i></a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i></a>
</div>

.snsbtn34{margin:0 0 1em 0;}
.snsbtn34 a{display:inline-block;width:64px;height:64px;margin:0 8px 0 0;padding:2px 0 0 0;line-height:64px;color:#fff;text-align:center;border-radius:50%;transition:0.5s;}
.snsbtn34 a i::before{margin:0 0 0 0;display:inline-block;font-size:20px;line-height:58px;}
.snsbtn34 a i{display:inline-block;vertical-align:top;width:60px;height:60px;border:1px dashed #fff;border-radius:50%;}
.snsbtn34 a:hover{transform:rotate(360deg);}
.snsbtn34 .btn-fb{background:#365899;}
.snsbtn34 .btn-tw{background:#1b95e0;}
.snsbtn34 .btn-po{background:#EF4056;}
.snsbtn34 .btn-hb{background:#008fde;}
.snsbtn34 .btn-gp{background:#DB4437;}
.snsbtn34 .btn-li{background:#00B900;}
.snsbtn34 .btn-fd{background:#2BB24C;}
.snsbtn34 .btn-bl{background:#333;}
.snsbtn34 .btn-fb:hover{background:#4166B0;}
.snsbtn34 .btn-tw:hover{background:#2EA1E9;}
.snsbtn34 .btn-po:hover{background:#F64F64;}
.snsbtn34 .btn-hb:hover{background:#009FF8;}
.snsbtn34 .btn-gp:hover{background:#db6d63;}
.snsbtn34 .btn-li:hover{background:#38ba38;}
.snsbtn34 .btn-fd:hover{background:#60b375;}
.snsbtn34 .btn-bl:hover{background:#505050;}

35:

<div class="snsbtn35">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i></a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i></a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i></a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i></a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i></a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i></a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i></a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i></a>
</div>

.snsbtn35{display:-webkit-flex;display:flex;margin:0 0 1em 0;}
.snsbtn35 a{display:block;width:64px;height:64px;margin:0 12px 12px 0;padding:8px;text-align:center;transition:0.3s;background:-moz-linear-gradient(#f8f8f8, #e0e0e0);background:-webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#e0e0e0));border-radius:50%;box-shadow:1px 1px 4px rgba(255,255,255,0.2)inset,1px 1px 3px rgba(0,0,0,0.3);color:#999;}
.snsbtn35 a i{display:block;line-height:49px;width:48px;height:48px;font-size:18px;margin:0 0 0 0;padding:0 0 0 0;vertical-align:top;background:-moz-linear-gradient(#e0e0e0, #f8f8f8);background:-webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#f8f8f8));box-shadow:1px 1px 4px rgba(0,0,0,0.1)inset,1px 1px 1px rgba(255,255,255,0.4);border-radius:50%;}
.snsbtn35 a i::before{margin:0 0 0 0;}
.snsbtn35 a:hover{box-shadow:1px 1px 4px rgba(255,255,255,0.2)inset,1px 1px 5px rgba(0,0,0,0.4);color:#666;}
.snsbtn35 a:active{background:-moz-linear-gradient(#e0e0e0, #f8f8f8);background:-webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#f8f8f8));box-shadow:1px 1px 4px rgba(0,0,0,0.2)inset,1px 1px 1px rgba(255,255,255,0.2);}

36:

<div class="snsbtn36">
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" class="btn-fb"><i class="icon-facebook"></i></a>
<a href="http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder" onclick="window.open('http://twitter.com/share?url={URLEncodedPermalink}&text={Title}&related=orefolder', '', 'width=500,height=400'); return false;" class="btn-tw"><i class="icon-twitter"></i></a>
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" class="btn-po"><i class="icon-get-pocket"></i></a>
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button btn-hb" data-hatena-bookmark-layout="simple"><i class="icon-hatebu"></i></a>
<a href="https://plus.google.com/share?url={URLEncodedPermalink}"  onclick="window.open(this.href, 'GooglePlusWindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="btn-gp" ><i class="icon-gplus"></i></a>
<a href="http://line.me/R/msg/text/?{Title}-{URLEncodedPermalink}" class="btn-li"><i class="icon-line"></i></a>
<a href="http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe" onclick="window.open('http://blog.hatena.ne.jp/c-miya/orefolder.hatenablog.jp/subscribe', '', 'width=500,height=400'); return false;" class="btn-bl"><i class="blogicon-hatenablog"></i></a>
<a href="http://cloud.feedly.com/#subscription%2Ffeed%2F{URLEncodedBlogURL}rss" class="btn-fd"><i class="icon-feedly"></i></a>
</div>

.snsbtn36{display:-webkit-flex;display:flex;margin:0 0 1em 0;}
.snsbtn36 a{display:block;width:64px;height:64px;margin:0 12px 12px 0;padding:5px;text-align:center;transition:0.3s;background:-moz-linear-gradient(#333333, #252525);background:-webkit-gradient(linear, left top, left bottom, from(#333333), to(#252525));border-radius:50%;box-shadow:0px 6px 6px rgba(255,255,255,0.6) inset,0px 3px 6px rgba(0,0,0,0.4);color:#999;}
.snsbtn36 a i{display:block;line-height:56px;width:54px;height:54px;font-size:20px;margin:0 0 0 0;padding:0 0 0 0;vertical-align:top;background:-moz-linear-gradient(#505050, #404040);background:-webkit-gradient(linear, left top, left bottom, from(#505050), to(#404040));border-radius:50%;}
.snsbtn36 a i::before{margin:0 0 0 0;}
.snsbtn36 a:hover{text-shadow:1px 1px 1px rgba(0,0,0,0.5);}
.snsbtn36 .btn-fb:hover{color:#4A69A3;}
.snsbtn36 .btn-tw:hover{color:#1b95e0;}
.snsbtn36 .btn-po:hover{color:#EF4056;}
.snsbtn36 .btn-hb:hover{color:#008fde;}
.snsbtn36 .btn-gp:hover{color:#DB4437;}
.snsbtn36 .btn-li:hover{color:#00B900;}
.snsbtn36 .btn-fd:hover{color:#2BB24C;}
.snsbtn36 .btn-bl:hover{color:#e0e0e0;}