INTEREST

※今回作ったボタンはSNSのTwitter・Facebook・Google+1の３つと、拍手・RSS・ブックマーク(お気に入りに追加)・お問い合わせの合計７種類。

---

【オリジナルボタン作成の流れ】

1. 1.Twitter・Facebook・Google+1ボタンのリンク先URL
2. 2.拍手・RSS・ブックマーク(お気に入りに追加)・お問い合わせボタンのリンク先URL
3. 3.各種ボタンの作成
   • 3-1.各種ボタンのHTML部分
   • 3-2.各種ボタンのCSS部分
4. 4.出来上がり♪

---

1.Twitter・Facebook・Google+1ボタンのリンク先URL

まずは、各ボタンを押した時のリンク先はこんな感じです。(色々検索しまくって探しましたｗ)

<a href="http://twitter.com/share?url=<%topentry_enc_link>&text=
<%enc_blogname>&url=<%enc_url>" target="_blank">ここにテキストもしくは画像</a>

<a href="http://www.facebook.com/share.php?u=<%topentry_enc_link>&t=
<%topentry_enc_title>" target="_blank">ここにテキストもしくは画像</a>

<a href="https://plus.google.com/share?url=<%topentry_enc_link>" 
target="_blank">ここにテキストもしくは画像</a>

※他にもたくさんのSNSがありますが、今回はこの３つのSNSを選びました。　
※見やすいように改行してますが、実際は改行せずに1行でOKです。
※<%○○○>は、FC2ブログの変数です。(詳しくは「テンプレート用 変数一覧 」でご確認下さい)

※上記は各記事ページにボタンを設置した場合のURLですので、トップページ等他のページにボタンを設置する場合は必要に応じて変数の部分を変更して下さい。

---

2.拍手・RSS・ブックマーク・お問い合わせボタンのリンク先URL

<a href="http://clap.fc2.com/post/interest2014/?url=<%topentry_enc_link>&title=
<%topentry_enc_utftitle>" target="_blank">ここにテキストもしくは画像</a>

※「FC2拍手 」を利用してます。（http://○○○～の部分は各自異なります）

<a href="http://interest2014.blog.fc2.com/?xml" target="_blank">
ここにテキストもしくは画像</a>

※http://○○○～の部分は各自異なります。

<a rel="sidebar" href="javascript:void" 
onClick="toFavorite(location.href,document.title);" 
title="このページをブックマークする">ここにテキストもしくは画像</a>

※「HTMLで書けるお気に入りに追加ボタンの実装 / サイト作成メモ 」様を参考にさせて頂きました。

<a href="http://form1.fc2.com/form/?id=935253" target="_blank">
ここにテキストもしくは画像</a>

※「FC2メールフォーム 」を利用してます。（http://○○○～の部分は各自異なります）

---

3.各種ボタンの作成

上記リンク先URLにある7種類のボタンを作る事にし、そして画像を一切使わずHTMLとCSSで光沢のあるボタンっぽく見えるようチャレンジしましたｗ（自己流なので、もっと良い作り方がありそうですが...）
※クリックした際のウインドウサイズの指定やブックマークの部分で、JavaScriptを使ってます。

各ボタンのアイコン部分には「Font Awesome 」を利用してます。
「Font Awesome」のページは英語なので使い方が分からない場合は、下記のブログが参考になります。
「これは便利！アイコン型WebフォントのCDN「Font Awesome」 / Webpark 」様

3-1.各種ボタンのHTML部分

<div class="btn-box">

<a href="http://clap.fc2.com/post/interest2014/?url=<%topentry_enc_link>
&title=<%topentry_enc_utftitle>" target="_blank" 
title="この記事に「拍手」を送る">
<div class="clap"><div><i class="fa fa-thumbs-up"></i></div></div></a>

<a href="http://twitter.com/share?url=<%topentry_enc_link>&amp;text=
<%topentry_enc_utftitle>/ <%enc_blogname>&amp;url=<%topentry_enc_link>" 
onclick="window.open(this.href, 'Twitter-window', 'width=550, height=450, 
menubar=no, toolbar=no, scrollbars=yes'); return false;" 
title="この記事について「Twitter」でつぶやく">
<div class="twitter"><div><i class="fa fa-twitter"></i></div></div></a>

<a href="http://www.facebook.com/share.php?u=<%topentry_enc_link>&t=
<%topentry_enc_title>" onclick="window.open(this.href, 'Facebook-window', 
'width=550, height=450, menubar=no, toolbar=no, scrollbars=yes'); 
return false;" title="この記事を「Facebook」でシェアする">
<div class="facebook"><div><i class="fa fa-facebook"></i></div></div></a>

<a href="https://plus.google.com/share?url=<%topentry_enc_link>" 
onclick="window.open(this.href, 'google-window', 'width=550, height=450, 
menubar=no, toolbar=no, scrollbars=yes'); return false;" 
title="この記事を「Google+」でシェアする">
<div class="google"><div><i class="fa fa-google-plus"></i></div></div></a>

<a href="http://interest2014.blog.fc2.com/?xml" onclick="window.open
(this.href, 'RSS-window', 'width=700, height=500, menubar=no, toolbar=no, 
scrollbars=yes'); return false;" title="最新記事の「RSS」を購読する">
<div class="rss-feed"><div><i class="fa fa-rss"></i></div></div></a>

<a rel="sidebar" href="javascript:void" 
onClick="toFavorite(location.href,document.title);" 
title="このページをブックマークする">
<div class="bookmark"><div><i class="fa fa-star"></i></div></div></a>

<a href="http://form1.fc2.com/form/?id=935253" class="maile-to" 
title="お問い合わせ">
<div class="mail-to"><div><i class="fa fa-envelope"></i></div></div></a>
</div>

※分かりやすいように適度なところで改行してます。

3-2.各種ボタンのCSS部分

.btn-box{ font-size:25px;}

.clap,.twitter,.facebook,.google,.rss-feed,.bookmark,.mail-to{
float:left;
width:32px;
height:32px;
border-radius:8px;
margin-right:15px;
box-shadow: 2px 2px 2px 0px #555555;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}
.clap:hover,.twitter:hover,.facebook:hover,.google:hover,.rss-feed:hover,.bookmark:hover,.mail-to:hover{
box-shadow: 0px 0px 0px 0px #fff;
}
.clap div,.twitter div,.facebook div,.google div,.rss-feed div,.bookmark div,.mail-to div{
height:30px;
text-align:center;
border-radius:7px;
}
.clap div i,.twitter div i,.facebook div i,.google div i,.rss-feed div i,.bookmark div i,.mail-to div i{ line-height:32px; }

.clap{ border:1px solid #333; }/*　▼　拍手ボタン部分　▼　*/
.clap div{
color:#fff;
border-top:#ddd 1px solid;
border-bottom:#666 1px solid;
background: rgb(170,170,170);
background: -moz-linear-gradient(top, rgba(170,170,170,1) 0%, rgba(119,119,119,1) 45%, rgba(85,85,85,1) 50%, rgba(34,34,34,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(170,170,170,1)), color-stop(45%,rgba(119,119,119,1)), color-stop(50%,rgba(85,85,85,1)), color-stop(100%,rgba(34,34,34,1)));
background: -webkit-linear-gradient(top, rgba(170,170,170,1) 0%,rgba(119,119,119,1) 45%,rgba(85,85,85,1) 50%,rgba(34,34,34,1) 100%);
background: -o-linear-gradient(top, rgba(170,170,170,1) 0%,rgba(119,119,119,1) 45%,rgba(85,85,85,1) 50%,rgba(34,34,34,1) 100%);
background: -ms-linear-gradient(top, rgba(170,170,170,1) 0%,rgba(119,119,119,1) 45%,rgba(85,85,85,1) 50%,rgba(34,34,34,1) 100%);
background: linear-gradient(to bottom, rgba(170,170,170,1) 0%,rgba(119,119,119,1) 45%,rgba(85,85,85,1) 50%,rgba(34,34,34,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#222222',GradientType=0 );
}
.clap div:hover{
border-top:#eee 1px solid;
border-bottom:#999 1px solid;
background: rgb(204,204,204);
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(153,153,153,1) 45%, rgba(119,119,119,1) 50%, rgba(68,68,68,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(45%,rgba(153,153,153,1)), color-stop(50%,rgba(119,119,119,1)), color-stop(100%,rgba(68,68,68,1)));
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(153,153,153,1) 45%,rgba(119,119,119,1) 50%,rgba(68,68,68,1) 100%);
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(153,153,153,1) 45%,rgba(119,119,119,1) 50%,rgba(68,68,68,1) 100%);
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(153,153,153,1) 45%,rgba(119,119,119,1) 50%,rgba(68,68,68,1) 100%);
background: linear-gradient(to bottom, rgba(204,204,204,1) 0%,rgba(153,153,153,1) 45%,rgba(119,119,119,1) 50%,rgba(68,68,68,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#444444',GradientType=0 );
}
.clap div i{margin-top:-1px;}

.twitter{ border:1px solid #ccc; }/*　▼　Twitterボタン部分　▼　*/
.twitter div{
color:#55acee;
border-top:#fff 1px solid;
border-bottom:#eee 1px solid;
background: rgb(252,252,252);
background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(240,240,240,1) 50%, rgba(229,229,229,1) 51%, rgba(223,223,223,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(50%,rgba(240,240,240,1)), color-stop(51%,rgba(229,229,229,1)), color-stop(100%,rgba(223,223,223,1)));
background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(240,240,240,1) 50%,rgba(229,229,229,1) 51%,rgba(223,223,223,1) 100%);
background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(240,240,240,1) 50%,rgba(229,229,229,1) 51%,rgba(223,223,223,1) 100%);
background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(240,240,240,1) 50%,rgba(229,229,229,1) 51%,rgba(223,223,223,1) 100%);
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(240,240,240,1) 50%,rgba(229,229,229,1) 51%,rgba(223,223,223,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#dfdfdf',GradientType=0 );
}
.twitter div:hover{
border-top:#fff 1px solid;
border-bottom:#fff 1px solid;
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 50%, rgba(235,235,235,1) 51%, rgba(239,239,239,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(245,245,245,1)), color-stop(51%,rgba(235,235,235,1)), color-stop(100%,rgba(239,239,239,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(245,245,245,1) 50%,rgba(235,235,235,1) 51%,rgba(239,239,239,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(245,245,245,1) 50%,rgba(235,235,235,1) 51%,rgba(239,239,239,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(245,245,245,1) 50%,rgba(235,235,235,1) 51%,rgba(239,239,239,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(245,245,245,1) 50%,rgba(235,235,235,1) 51%,rgba(239,239,239,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 );
}

.facebook{ border:1px solid #315096; }/*　▼　Facebookボタン部分　▼　*/
.facebook div{
color:#fff;
border-top:#ccf 1px solid;
border-bottom:#88b 1px solid;
background: rgb(133,165,235);
background: -moz-linear-gradient(top, rgba(133,165,235,1) 0%, rgba(49,80,150,1) 45%, rgba(1,32,102,1) 50%, rgba(49,80,150,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(133,165,235,1)), color-stop(45%,rgba(49,80,150,1)), color-stop(50%,rgba(1,32,102,1)), color-stop(100%,rgba(49,80,150,1)));
background: -webkit-linear-gradient(top, rgba(133,165,235,1) 0%,rgba(49,80,150,1) 45%,rgba(1,32,102,1) 50%,rgba(49,80,150,1) 100%);
background: -o-linear-gradient(top, rgba(133,165,235,1) 0%,rgba(49,80,150,1) 45%,rgba(1,32,102,1) 50%,rgba(49,80,150,1) 100%);
background: -ms-linear-gradient(top, rgba(133,165,235,1) 0%,rgba(49,80,150,1) 45%,rgba(1,32,102,1) 50%,rgba(49,80,150,1) 100%);
background: linear-gradient(to bottom, rgba(133,165,235,1) 0%,rgba(49,80,150,1) 45%,rgba(1,32,102,1) 50%,rgba(49,80,150,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#85a5eb', endColorstr='#315096',GradientType=0 );
}
.facebook div:hover{
border-top:#eef 1px solid;
border-bottom:#bbf 1px solid;
background: rgb(145,176,246);
background: -moz-linear-gradient(top, rgba(145,176,246,1) 0%, rgba(97,128,198,1) 45%, rgba(81,112,182,1) 50%, rgba(97,128,198,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(145,176,246,1)), color-stop(45%,rgba(97,128,198,1)), color-stop(50%,rgba(81,112,182,1)), color-stop(100%,rgba(97,128,198,1)));
background: -webkit-linear-gradient(top, rgba(145,176,246,1) 0%,rgba(97,128,198,1) 45%,rgba(81,112,182,1) 50%,rgba(97,128,198,1) 100%);
background: -o-linear-gradient(top, rgba(145,176,246,1) 0%,rgba(97,128,198,1) 45%,rgba(81,112,182,1) 50%,rgba(97,128,198,1) 100%);
background: -ms-linear-gradient(top, rgba(145,176,246,1) 0%,rgba(97,128,198,1) 45%,rgba(81,112,182,1) 50%,rgba(97,128,198,1) 100%);
background: linear-gradient(to bottom, rgba(145,176,246,1) 0%,rgba(97,128,198,1) 45%,rgba(81,112,182,1) 50%,rgba(97,128,198,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91b0f6', endColorstr='#6180c6',GradientType=0 );
}

.google{ border:1px solid #d33; }/*　▼　Google+ボタン部分　▼　*/
.google div{
color:#fff;
border-top:#ebb 1px solid;
border-bottom:#c88 1px solid;
background: rgb(244,99,80);
background: -moz-linear-gradient(top, rgba(244,99,80,1) 0%, rgba(221,75,57,1) 45%, rgba(205,59,41,1) 50%, rgba(221,75,57,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,99,80,1)), color-stop(45%,rgba(221,75,57,1)), color-stop(50%,rgba(205,59,41,1)), color-stop(100%,rgba(221,75,57,1)));
background: -webkit-linear-gradient(top, rgba(244,99,80,1) 0%,rgba(221,75,57,1) 45%,rgba(205,59,41,1) 50%,rgba(221,75,57,1) 100%);
background: -o-linear-gradient(top, rgba(244,99,80,1) 0%,rgba(221,75,57,1) 45%,rgba(205,59,41,1) 50%,rgba(221,75,57,1) 100%);
background: -ms-linear-gradient(top, rgba(244,99,80,1) 0%,rgba(221,75,57,1) 45%,rgba(205,59,41,1) 50%,rgba(221,75,57,1) 100%);
background: linear-gradient(to bottom, rgba(244,99,80,1) 0%,rgba(221,75,57,1) 45%,rgba(205,59,41,1) 50%,rgba(221,75,57,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f46350', endColorstr='#dd4b39',GradientType=0 );
}
.google div:hover{
border-top:#fee 1px solid;
border-bottom:#fbb 1px solid;
background: rgb(255,147,128);
background: -moz-linear-gradient(top, rgba(255,147,128,1) 0%, rgba(255,123,105,1) 45%, rgba(253,107,89,1) 50%, rgba(255,123,105,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,147,128,1)), color-stop(45%,rgba(255,123,105,1)), color-stop(50%,rgba(253,107,89,1)), color-stop(100%,rgba(255,123,105,1)));
background: -webkit-linear-gradient(top, rgba(255,147,128,1) 0%,rgba(255,123,105,1) 45%,rgba(253,107,89,1) 50%,rgba(255,123,105,1) 100%);
background: -o-linear-gradient(top, rgba(255,147,128,1) 0%,rgba(255,123,105,1) 45%,rgba(253,107,89,1) 50%,rgba(255,123,105,1) 100%);
background: -ms-linear-gradient(top, rgba(255,147,128,1) 0%,rgba(255,123,105,1) 45%,rgba(253,107,89,1) 50%,rgba(255,123,105,1) 100%);
background: linear-gradient(to bottom, rgba(255,147,128,1) 0%,rgba(255,123,105,1) 45%,rgba(253,107,89,1) 50%,rgba(255,123,105,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9380', endColorstr='#ff7b69',GradientType=0 );
}

.rss-feed{ border:1px solid #ffbc00; }/*　▼　RSSボタン部分　▼　*/
.rss-feed div{
color:#fff;
border-top:#eed 1px solid;
border-bottom:#dc8 1px solid;
background: rgb(255,204,80);
background: -moz-linear-gradient(top, rgba(255,204,80,1) 0%, rgba(255,172,0,1) 45%, rgba(255,156,0,1) 51%, rgba(255,172,32,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,204,80,1)), color-stop(45%,rgba(255,172,0,1)), color-stop(51%,rgba(255,156,0,1)), color-stop(100%,rgba(255,172,32,1)));
background: -webkit-linear-gradient(top, rgba(255,204,80,1) 0%,rgba(255,172,0,1) 45%,rgba(255,156,0,1) 51%,rgba(255,172,32,1) 100%);
background: -o-linear-gradient(top, rgba(255,204,80,1) 0%,rgba(255,172,0,1) 45%,rgba(255,156,0,1) 51%,rgba(255,172,32,1) 100%);
background: -ms-linear-gradient(top, rgba(255,204,80,1) 0%,rgba(255,172,0,1) 45%,rgba(255,156,0,1) 51%,rgba(255,172,32,1) 100%);
background: linear-gradient(to bottom, rgba(255,204,80,1) 0%,rgba(255,172,0,1) 45%,rgba(255,156,0,1) 51%,rgba(255,172,32,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc50', endColorstr='#ffac20',GradientType=0 );
}
.rss-feed div:hover{
border-top:#ffe 1px solid;
border-bottom:#eed 1px solid;
background: rgb(255,233,109);
background: -moz-linear-gradient(top, rgba(255,233,109,1) 0%, rgba(255,201,30,1) 45%, rgba(255,185,29,1) 50%, rgba(255,201,62,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,233,109,1)), color-stop(45%,rgba(255,201,30,1)), color-stop(50%,rgba(255,185,29,1)), color-stop(100%,rgba(255,201,62,1)));
background: -webkit-linear-gradient(top, rgba(255,233,109,1) 0%,rgba(255,201,30,1) 45%,rgba(255,185,29,1) 50%,rgba(255,201,62,1) 100%);
background: -o-linear-gradient(top, rgba(255,233,109,1) 0%,rgba(255,201,30,1) 45%,rgba(255,185,29,1) 50%,rgba(255,201,62,1) 100%);
background: -ms-linear-gradient(top, rgba(255,233,109,1) 0%,rgba(255,201,30,1) 45%,rgba(255,185,29,1) 50%,rgba(255,201,62,1) 100%);
background: linear-gradient(to bottom, rgba(255,233,109,1) 0%,rgba(255,201,30,1) 45%,rgba(255,185,29,1) 50%,rgba(255,201,62,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe96d', endColorstr='#ffc93e',GradientType=0 );
}
.rss-feed div i{padding-top:1px;}

.bookmark{ border:1px solid #00c300; }/*　▼　ブックマークボタン部分　▼　*/
.bookmark div{
color:#fff;
border-top:#beb 1px solid;
border-bottom:#8c8 1px solid;
background: rgb(0,227,0);
background: -moz-linear-gradient(top, rgba(0,227,0,1) 0%, rgba(0,195,0,1) 45%, rgba(0,169,0,1) 50%, rgba(0,192,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,227,0,1)), color-stop(45%,rgba(0,195,0,1)), color-stop(50%,rgba(0,169,0,1)), color-stop(100%,rgba(0,192,0,1)));
background: -webkit-linear-gradient(top, rgba(0,227,0,1) 0%,rgba(0,195,0,1) 45%,rgba(0,169,0,1) 50%,rgba(0,192,0,1) 100%);
background: -o-linear-gradient(top, rgba(0,227,0,1) 0%,rgba(0,195,0,1) 45%,rgba(0,169,0,1) 50%,rgba(0,192,0,1) 100%);
background: -ms-linear-gradient(top, rgba(0,227,0,1) 0%,rgba(0,195,0,1) 45%,rgba(0,169,0,1) 50%,rgba(0,192,0,1) 100%);
background: linear-gradient(to bottom, rgba(0,227,0,1) 0%,rgba(0,195,0,1) 45%,rgba(0,169,0,1) 50%,rgba(0,192,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e300', endColorstr='#00c000',GradientType=0 );
}
.bookmark div:hover{
border-top:#efe 1px solid;
border-bottom:#beb 1px solid;
background: rgb(140,255,140);
background: -moz-linear-gradient(top, rgba(140,255,140,1) 0%, rgba(119,238,119,1) 45%, rgba(85,204,85,1) 50%, rgba(102,220,102,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(140,255,140,1)), color-stop(45%,rgba(119,238,119,1)), color-stop(50%,rgba(85,204,85,1)), color-stop(100%,rgba(102,220,102,1)));
background: -webkit-linear-gradient(top, rgba(140,255,140,1) 0%,rgba(119,238,119,1) 45%,rgba(85,204,85,1) 50%,rgba(102,220,102,1) 100%);
background: -o-linear-gradient(top, rgba(140,255,140,1) 0%,rgba(119,238,119,1) 45%,rgba(85,204,85,1) 50%,rgba(102,220,102,1) 100%);
background: -ms-linear-gradient(top, rgba(140,255,140,1) 0%,rgba(119,238,119,1) 45%,rgba(85,204,85,1) 50%,rgba(102,220,102,1) 100%);
background: linear-gradient(to bottom, rgba(140,255,140,1) 0%,rgba(119,238,119,1) 45%,rgba(85,204,85,1) 50%,rgba(102,220,102,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8cff8c', endColorstr='#66dc66',GradientType=0 );
}

.mail-to{ border:1px solid #09f; }/*　▼　お問い合わせボタン部分　▼　*/
.mail-to div{
color:#fff;
border-top:#ccf 1px solid;
border-bottom:#99e 1px solid;
background: rgb(109,179,242);
background: -moz-linear-gradient(top, rgba(109,179,242,1) 0%, rgba(84,163,238,1) 45%, rgba(54,144,240,1) 50%, rgba(54,123,219,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(109,179,242,1)), color-stop(45%,rgba(84,163,238,1)), color-stop(50%,rgba(54,144,240,1)), color-stop(100%,rgba(54,123,219,1)));
background: -webkit-linear-gradient(top, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 45%,rgba(54,144,240,1) 50%,rgba(54,123,219,1) 100%);
background: -o-linear-gradient(top, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 45%,rgba(54,144,240,1) 50%,rgba(54,123,219,1) 100%);
background: -ms-linear-gradient(top, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 45%,rgba(54,144,240,1) 50%,rgba(54,123,219,1) 100%);
background: linear-gradient(to bottom, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 45%,rgba(54,144,240,1) 50%,rgba(54,123,219,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#367bdb',GradientType=0 );
}
.mail-to div:hover{
border-top:#eef 1px solid;
border-bottom:#ccf 1px solid;
background: rgb(157,227,255);
background: -moz-linear-gradient(top, rgba(157,227,255,1) 0%, rgba(132,211,255,1) 45%, rgba(102,192,255,1) 50%, rgba(102,171,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(157,227,255,1)), color-stop(45%,rgba(132,211,255,1)), color-stop(50%,rgba(102,192,255,1)), color-stop(100%,rgba(102,171,255,1)));
background: -webkit-linear-gradient(top, rgba(157,227,255,1) 0%,rgba(132,211,255,1) 45%,rgba(102,192,255,1) 50%,rgba(102,171,255,1) 100%);
background: -o-linear-gradient(top, rgba(157,227,255,1) 0%,rgba(132,211,255,1) 45%,rgba(102,192,255,1) 50%,rgba(102,171,255,1) 100%);
background: -ms-linear-gradient(top, rgba(157,227,255,1) 0%,rgba(132,211,255,1) 45%,rgba(102,192,255,1) 50%,rgba(102,171,255,1) 100%);
background: linear-gradient(to bottom, rgba(157,227,255,1) 0%,rgba(132,211,255,1) 45%,rgba(102,192,255,1) 50%,rgba(102,171,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9de3ff', endColorstr='#66abff',GradientType=0 );
}
.mail-to div i{margin:-2px 0 0 1px;}

※改行すると、ものすごく縦長になるので改行せずにそのまま載せました。
※CSSのグラデーションは「Ultimate CSS Gradient Generator 」を利用しました。

---

4.出来上がり♪

上記のHTMLとCSSのソースをコピペすると、こんな感じで表示されます。(一応表示を確認♪)

※CSS部分はすでにテンプレートに記述してるので、HTML部分のソースを上記からコピペでそのままこの記事内に貼り付けてみました。（URLは各自で編集が必要なので、コピペの際はお気を付け下さい。）

※上記は表示を確認する為に、直接記事内にソースをコピペしてますが、記事内からでは正常にリンクしませんのでご注意下さい。

【ボタン設置の注意点など】

・オリジナルのボタンを使う場合は、FC2ブログのデフォルトで用意されてる拍手ボタン等は非表示にした方が良いです。（ボタンが重複してしまうので＾＾；）　

・ボタンはテンプレート内のどこにでも表示出来ますが、記事下に配置する場合は、「テンプレートの設定」のHTMLソース内で「<!--/more-->」を検索して、その下辺りに記述すると丁度良いかもです。
※検索はキーボードの「Ctrl」+「F」で行えます。
それ以外に設置する場合は、<!--topentry--> ～ <!--/topentry-->の変数の間に設置します。
※詳しくは「テンプレート用 変数一覧　 」で変数と、その変数が使えるエリアをご確認下さい。

私の場合は、各記事の下とページ最上部右端にボタンを配置して、それぞれの配置場所に合わせてURLもちょっと変えたりしてみました。（お問い合わせボタンはページ最上部のみに配置）
※ページ最上部へも配置したのは、ぶっちゃけ空きスペースをどうするか悩んでたので...ｗ

以上の流れで、無事に各ボタンが機能すればオリジナルボタンの完成です♪
自分的には、中々良い出来になったと満足してますが、この手間が面倒だ...　と言う場合は
「忍者おまとめボタン 」がおススメです
ボタンの種類がすごく豊富で、好きなボタンだけを選んで並べる事が出来るので、カウントの吹き出しが無いボタンだけを並べたり、ボタンの色を統一したり等など、かなり自分好みに出来ると思います。