css - Facebookの大きなシェアボタン

Question

周りにある大きなFacebookの共有ボタンをどのように実装できるのか疑問に思っています。どこかにチュートリアルがありますか、それともワードプレスのプラグインですか? それが私が使っているものです。

これが私が話していることの例です：

普通

ホバー状態

Answer 1

Tuts+ には似たようなチュートリアルがあります。http://net.tutsplus.com/tutorials/html-css-techniques/build-awesome-practical-css3-buttons/

しかし、基本的に。これは css3 グラデーションで、ホバーすると消えます。また、二重ボーダー効果を作成するために、ネストされた要素を使用したようです。

Answer 2

<a href="http://www.facebook.com/sharer.php?s=100&p[title]=YOUR TITLE&p[url]=YOUR URL&p[images][0]=YOUR IMAGE URL" class="facebook">Share on Facebook</a>

ほとんどの場合のように、ポップアップ ウィンドウなどでそれが必要な場合は、お問い合わせください。

.facebook{
background: url(NONE HOVER FACEBOOK BUTTON IMAGE) no-repeat;
display:block;
width: WIDTH OF IMAGE;
height: HEIGHT OF IMAGE;
text-indent: -999em;
}
.facebook:hover{
background-image: url(HOVERSTATE FACEBOOK BUTTON IMAGE);
}