【ブログに使いたい!】カスタマイズ度の高いSNSシェアボタンまとめ

サムネイル WordPress

今回はよりカスタマイズ度が高いSNSシェアボタンを設置したいという人のために、自分なりに頑張ってコードを用意しました。

僕はWordPressテーマ「Simplicity」を使っているので、同じくSimplicityを使っている人はコピペで一発です。また、SNSシェアボタンの種類は「バイラルタイプ(高速)」を使ってください。

ちなみにSimplicityはデフォルトでもいい感じのSNSシェアボタンのデザインが用意されています。詳しくは以下の記事を見てください。

 

それ以外のテーマを使っている人はCSSセレクタを自分のテーマに合うように各自変更をお願いします。

他にもカスタマイズが思いついたら随時追加していく予定です。

それではどうぞ。

 

スポンサーリンク

スワイプ系

マウスが乗ると背景色がスワイプします。

 

左から右へスワイプ


.snsbs li a:hover {
    opacity: 0.999999;
}
.sns-group-viral ul.snsb li a {
    position: relative;
    line-height: 30px;
    transition: 0.3s;
}
.sns-group-viral ul.snsb li a::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    z-index: -1;
    transition: 0.3s;
}
.sns-group-viral ul.snsb li a:hover::before {
    width: 100%;
    background-color: #fff;
}
/* ツイッター */
    ul.snsbs a.twitter-btn-icon-link:hover {
    color: #55acee;
}
.sns-group-viral ul.snsbs a.twitter-btn-icon-link {
    border: 3px solid #55acee;
}
/* フェイスブック */
ul.snsbs a.facebook-btn-icon-link:hover {
    color: #3b5998;
}
.sns-group-viral ul.snsbs a.facebook-btn-icon-link {
    border: 3px solid #3b5998;
}
/* グーグル+ */
ul.snsbs a.google-plus-btn-icon-link:hover {
    color: #dd4b39;
}
.sns-group-viral ul.snsbs a.google-plus-btn-icon-link {
    border: 3px solid #dd4b39;
}
/* はてブ */
ul.snsbs a.hatena-btn-icon-link:hover {
    color: #3C7DD1;
}
.sns-group-viral ul.snsbs a.hatena-btn-icon-link {
    border: 3px solid #3C7DD1;
}
/* ポケット */
ul.snsbs a.pocket-btn-icon-link:hover {
    color: #EE4257;
}
.sns-group-viral ul.snsbs a.pocket-btn-icon-link {
    border: 3px solid #EE4257;
}
/* ライン */
ul.snsbs a.line-btn-icon-link:hover {
    color: #00c300;
}
.sns-group-viral ul.snsbs a.line-btn-icon-link {
    border: 3px solid #00c300;
}
/* feedly */
ul.snsbs a.feedly-btn-icon-link:hover {
    color: #87bd33;
}
.sns-group-viral ul.snsbs a.feedly-btn-icon-link {
    border: 3px solid #87bd33;
}
/* コメント */
ul.snsbs a.comments-btn-icon-link:hover {
color: #555;
}
.sns-group-viral ul.snsbs a.comments-btn-icon-link {
    border: 3px solid #555;
}

 

下から上へスワイプ


.snsbs li a:hover {
    opacity: 0.999999;
}
.sns-group-viral ul.snsb li a {
    position: relative;
    transition: 0.3s;
    line-height: 30px;
}
.sns-group-viral ul.snsb li a::before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    transition: 0.3s;
}
.sns-group-viral ul.snsb li a:hover::before {
    height: 100%;
    background-color: #fff;
}
/* ツイッター */
ul.snsbs a.twitter-btn-icon-link:hover {
    color: #55acee;
}
.sns-group-viral ul.snsbs a.twitter-btn-icon-link {
    border: 3px solid #55acee;
}
/* フェイスブック */
ul.snsbs a.facebook-btn-icon-link:hover {
    color: #3b5998;
}
.sns-group-viral ul.snsbs a.facebook-btn-icon-link {
    border: 3px solid #3b5998;
}
/* グーグル+ */
ul.snsbs a.google-plus-btn-icon-link:hover {
    color: #dd4b39;
}
.sns-group-viral ul.snsbs a.google-plus-btn-icon-link {
    border: 3px solid #dd4b39;
}
/* はてブ */
ul.snsbs a.hatena-btn-icon-link:hover {
    color: #3C7DD1;
}
.sns-group-viral ul.snsbs a.hatena-btn-icon-link {
    border: 3px solid #3C7DD1;
}
/* ポケット */
ul.snsbs a.pocket-btn-icon-link:hover {
    color: #EE4257;
}
.sns-group-viral ul.snsbs a.pocket-btn-icon-link {
    border: 3px solid #EE4257;
}
/* ライン */
ul.snsbs a.line-btn-icon-link:hover {
    color: #00c300;
}
.sns-group-viral ul.snsbs a.line-btn-icon-link {
    border: 3px solid #00c300;
}
/* feedly */
ul.snsbs a.feedly-btn-icon-link:hover {
    color: #87bd33;
}
.sns-group-viral ul.snsbs a.feedly-btn-icon-link {
    border: 3px solid #87bd33;
}
/* コメント */
ul.snsbs a.comments-btn-icon-link:hover {
    color: #555;
}
.sns-group-viral ul.snsbs a.comments-btn-icon-link {
    border: 3px solid #555;
}

 

中央から左右にスワイプ


.snsbs li a:hover {
    opacity: 0.999999;
}
.sns-group-viral ul.snsb li a {
    position: relative;
    transition: 0.3s;
    line-height: 30px;
}
.sns-group-viral ul.snsb li a::before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 0;
    height: 100%;
    transition: 0.3s;
   margin: 0 auto;
}
.sns-group-viral ul.snsb li a:hover::before {
    width: 100%;
    background-color: #fff;
}
/* ツイッター */
ul.snsbs a.twitter-btn-icon-link:hover {
    color: #55acee;
}
.sns-group-viral ul.snsbs a.twitter-btn-icon-link {
    border: 3px solid #55acee;
}
/* フェイスブック */
ul.snsbs a.facebook-btn-icon-link:hover {
    color: #3b5998;
}
.sns-group-viral ul.snsbs a.facebook-btn-icon-link {
    border: 3px solid #3b5998;
}
/* グーグル+ */
ul.snsbs a.google-plus-btn-icon-link:hover {
    color: #dd4b39;
}
.sns-group-viral ul.snsbs a.google-plus-btn-icon-link {
    border: 3px solid #dd4b39;
}
/* はてブ */
ul.snsbs a.hatena-btn-icon-link:hover {
    color: #3C7DD1;
}
.sns-group-viral ul.snsbs a.hatena-btn-icon-link {
    border: 3px solid #3C7DD1;
}
/* ポケット */
ul.snsbs a.pocket-btn-icon-link:hover {
    color: #EE4257;
}
.sns-group-viral ul.snsbs a.pocket-btn-icon-link {
    border: 3px solid #EE4257;
}
/* ライン */
ul.snsbs a.line-btn-icon-link:hover {
    color: #00c300;
}
.sns-group-viral ul.snsbs a.line-btn-icon-link {
    border: 3px solid #00c300;
}
/* feedly */
ul.snsbs a.feedly-btn-icon-link:hover {
    color: #87bd33;
}
.sns-group-viral ul.snsbs a.feedly-btn-icon-link {
    border: 3px solid #87bd33;
}
/* コメント */
ul.snsbs a.comments-btn-icon-link:hover {
    color: #555;
}
.sns-group-viral ul.snsbs a.comments-btn-icon-link {
    border: 3px solid #555;
}

 

左上/右下からボーダーがスワイプ


.snsbs li a:hover {
    opacity: 0.99999;
    background-color: #fff;
}
.sns-group-viral ul.snsb li a {
    position: relative;
    transition: 0.5s;
}
.sns-group-viral ul.snsb li a::before,
.sns-group-viral ul.snsb li a::after {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    width: 0;
    height: 3px;
    transition: 0.3s;
}
.sns-group-viral ul.snsb li a::before {
    top: 0;
    left: 0;
}
.sns-group-viral ul.snsb li a::after {
    bottom: 0;
    right: 0;
}
.sns-group-viral ul.snsb li a:hover::before,
.sns-group-viral ul.snsb li a:hover::after {
    width: 100%;
}
/* ツイッター */
ul.snsbs a.twitter-btn-icon-link:hover {
    color: #55acee;
}
ul.snsbs a.twitter-btn-icon-link:hover::before,
ul.snsbs a.twitter-btn-icon-link:hover::after {
    background-color: #55acee;
}
/* フェイスブック */
ul.snsbs a.facebook-btn-icon-link:hover {
    color: #3b5998;
}
ul.snsbs a.facebook-btn-icon-link:hover::before,
ul.snsbs a.facebook-btn-icon-link:hover::after {
    background-color: #3b5998;
}
/* グーグル+ */
ul.snsbs a.google-plus-btn-icon-link:hover {
    color: #dd4b39;
}
ul.snsbs a.google-plus-btn-icon-link:hover::before,
ul.snsbs a.google-plus-btn-icon-link:hover::after {
    background-color: #dd4b39;
}
/* はてブ */
ul.snsbs a.hatena-btn-icon-link:hover {
    color: #3C7DD1;
}
ul.snsbs a.hatena-btn-icon-link:hover::before,
ul.snsbs a.hatena-btn-icon-link:hover::after {
    background-color: #3C7DD1;
}
/* ポケット */
ul.snsbs a.pocket-btn-icon-link:hover {
    color: #EE4257;
}
ul.snsbs a.pocket-btn-icon-link:hover::before,
ul.snsbs a.pocket-btn-icon-link:hover::after {
    background-color: #EE4257;
}
/* ライン */
ul.snsbs a.line-btn-icon-link:hover {
    color: #00c300;
}
ul.snsbs a.line-btn-icon-link:hover::before,
ul.snsbs a.line-btn-icon-link:hover::after {
    background-color: #00c300;
}
/* feedly */
ul.snsbs a.feedly-btn-icon-link:hover {
    color: #87bd33;
}
ul.snsbs a.feedly-btn-icon-link:hover::before,
ul.snsbs a.feedly-btn-icon-link:hover::after {
background-color: #87bd33;
}
/* コメント */
ul.snsbs a.comments-btn-icon-link:hover {
    color: #555;
}
ul.snsbs a.comments-btn-icon-link:hover::before,
ul.snsbs a.comments-btn-icon-link:hover::after {
    background-color: #555;
}

 

ボタン

マウスが乗ると凹みます。


.snsbs li a:hover {
    opacity: 0.999999;
}
.sns-group-viral ul.snsb li a {
    position: relative;
    transition: 0.15s;
}
.sns-group-viral ul.snsb li a:hover {
    box-shadow: none;
    transform: translateY(3px);
}
/* ツイッター */
ul.snsbs a.twitter-btn-icon-link {
    box-shadow: 0 3px 0 0 #3190d8;
}
ul.snsbs a.twitter-btn-icon-link:hover {
    background-color: #3190d8;
}
/* フェイスブック */
ul.snsbs a.facebook-btn-icon-link {
    box-shadow: 0 3px 0 0 #33456b;
}
ul.snsbs a.facebook-btn-icon-link:hover {
    background-color: #33456b;
}
/* グーグル+ */
ul.snsbs a.google-plus-btn-icon-link {
    box-shadow: 0 3px 0 0 #bd3d2e;
}
ul.snsbs a.google-plus-btn-icon-link:hover {
    background-color: #bd3d2e;
}
/* はてブ */
ul.snsbs a.hatena-btn-icon-link {
    box-shadow: 0 3px 0 0 #3566a7;
}
ul.snsbs a.hatena-btn-icon-link:hover {
    background-color: #3566a7;
}
/* ポケット */
ul.snsbs a.pocket-btn-icon-link {
    box-shadow: 0 3px 0 0#cb2539;
}
ul.snsbs a.pocket-btn-icon-link:hover {
    background-color: #cb2539;
}
/* ライン */
ul.snsbs a.line-btn-icon-link{
    box-shadow: 0 3px 0 0 #079207;
}
.sns-group-viral ul.snsbs a.line-btn-icon-link:hover {
    background-color: #079207;
}
/* feedly */
ul.snsbs a.feedly-btn-icon-link{
    box-shadow: 0 3px 0 0 #6e9433;
}
ul.snsbs a.feedly-btn-icon-link:hover {
    background-color: #6e9433;
}
/* コメント */
ul.snsbs a.comments-btn-icon-link {
    box-shadow: 0 3px 0 0 #333;
}
.sns-group-viral ul.snsbs a.comments-btn-icon-link:hover {
    background-color: #333;
}

 

効果系

マウスが乗るとエフェクトがかかります。

 

拡大


.snsbs li a:hover {
    opacity: 0.999999;
}
.sns-group-viral ul.snsb li a {
    transition: 0.3s;
}
.sns-group-viral ul.snsb li a:hover {
    -webkit-transform: scale(1.1, 1.2);
    transform: scale(1.1, 1.2);
}

 

波形


.snsbs li a:hover {
    opacity: 0.999999;
}
.sns-group-viral ul.snsb li a {
    position: relative;
}
.sns-group-viral ul.snsb li a::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: -webkit-calc(100% - 8px);
    width: calc(100% - 8px);
    height: -webkit-calc(100% - 8px);
    height: calc(100% - 8px);
}
.sns-group-viral ul.snsb li a:hover::before {
    -webkit-transform: scale(1.1, 1.3);
    transform: scale(1.1, 1.3);
    transition: 1s;
    opacity: 0;
}
/* ツイッター */
ul.snsbs a.twitter-btn-icon-link::before {
    border: 4px solid #55acee;
}
/* フェイスブック */
ul.snsbs a.facebook-btn-icon-link::before {
    border: 4px solid #3b5998;
}
/* グーグル+ */
ul.snsbs a.google-plus-btn-icon-link::before {
    border: 4px solid #dd4b39;
}
/* はてブ */
ul.snsbs a.hatena-btn-icon-link::before {
    border: 4px solid #3C7DD1;
}
/* ポケット */
ul.snsbs a.pocket-btn-icon-link::before {
    border: 4px solid #EE4257
}
/* ライン */
ul.snsbs a.line-btn-icon-link::before {
    border: 4px solid #00c300;
}
/* feedly */
ul.snsbs a.feedly-btn-icon-link::before {
    border: 4px solid #87bd33;
}
/* コメント */
ul.snsbs a.comments-btn-icon-link::before {
    border: 4px solid #555;
}

浮遊


.snsbs li a:hover {
    opacity: 0.999999;
}
.sns-group-viral ul.snsb li a {
    transition: 0.3s;
}
.sns-group-viral ul.snsb li a:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

 

浮遊(影付き)


.snsbs li a:hover {
    opacity: 0.999999;
}
.sns-group-viral ul.snsb li a {
    position: relative;
    transition: 0.3s;
}
.sns-group-viral ul.snsb li a:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}
.sns-group-viral ul.snsb li a::before {
    content: '';
    display: block;
   position: absolute;
   top: 100%;
    left: 10%;
    width: 80%;
    height: 10px;
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
    background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
}
.sns-group-viral ul.snsb li a:hover::before {
    opacity: 1;
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

 

よりカスタマイズ性の高いボタンを作ってみたい人は自分で作ってみるのもいいと思います。

以下の本は中級者向けなので、これ1冊やれば自分でもおもしろいボタンが作れるようになるでしょう。あとは頭のひねりようです。

 

まとめ

カスタム性の高いSNSシェアボタンを作ってみました。

他にも別のカスタマイズを思いついたら随時紹介していきます。

コードのコピペは自由です!気に入ったものをお持ち帰りください。