[cocoon]SNSシェアボタンのちょっとしたカスタマイズ

SNSシェアボタンをカスタマイズします

「cocoon」のカスタマイズ日記です。

SNSシェアボタンにマウスオーバーした時、ふわっと浮き上がるエフェクトを追加します。「カスタマイズ」→「追加CSS」をクリック。

以下のコードを追加します。↓

.sns-buttons :hover{
 transform:translateY(-3px);
}

マウスオーバー時にY方向に-3px（上方向に3px）移動させる指定です。でもそれだけではボタン内のロゴと文字もそれぞれ動いてしまうので、以下のコードを追加。↓

.button-caption:hover,
.social-icon:hover,
.icon-home-logo:hover,
.icon-feedly-logo:hover,
.icon-rss-logo:hover{
transform:none;
}

各アイコンにtransform:none;をまとめて指定してあります。

こうすれば、ボタンごとマウスオーバー時にふわっと浮き上がります。

当記事のSNSシェアボタンがデモになっています。ご確認ください。

その他、SNSシェアボタンの色の変更、表示位置の変更などは、「ダッシュボード」→「cocoon設定」から行えます。「SNSシェア」のタブをクリック。↓

以上、SNSシェアボタンのカスタマイズでした。参考になれば幸いです。