シェアボタンが沈むギミックで画面全体が動いてしまう

色んな方のブログを参考にさせていただいていると、大抵はシェアボタンが設置してあります。開設間もない僕のブログには、現時点でシェアボタンなど全く必要ないのですが、ただ真似してみたいという理由だけで設置してみました。

ボタンが沈むギミック

シェア「ボタン」というからには、実際のボタンを押したように沈む動きを取り入れたい。実際にそういうシェアボタンを設置しておられるブログも多くあり、これもただ真似てみたかったというのが理由です。設置方法やコードに関しては、他の方の解説記事を参考にコードもほぼ丸パクリさせてさせていただいたので割愛します。

画面全体が動く

しかし、参考にしたとおりのコードをコピペしましたが、どうも問題が発生しました。ホバーするとボタンが沈む動きは再現できたのですが、ボタンが沈むと同時に画面全体も一緒に動いてしまうのです。これではかっこ悪い。なにがいけないのか。コピペしたコードがどこか違っている様子もなく、初心者の僕には全く分かりません。

ネットを頼る

そもそも最初から頼りっきりでしたが、またネットで解決方法を探してみることにしました。僕のようなケースがなかなか見つかりませんでしたが、根気良く検索してなんとかそれっぽいのを見つけることが出来ました。

transformを使う

解決方法を探した結果、どうやら1行の扱いがどうのこうの…という話でしたが、僕には理解できません。とにかく、transformを使うと解決できるということだけは分かりました。このブログのfacebookボタンの例ですと、style.cssに以下のように書き込みます。

ul#sns_btn li.sns_btnInner a.facebook {
    background-color: #3b5998;
    box-shadow: 0 3px 0 #213254;
}

ul#sns_btn li.sns_btnInner a.facebook:hover{
transform: translate(0px, 5px);
box-shadow:none; 
}

ul#sns_btn li.sns_btnInner a.facebook:active{
    background: #213254;
}

ホバーのところにtransformの記述を足しました。すると、元々の意図するギミックとは少しだけ変わってしまいましたが、沈む動きをしながら、画面全体が動くこともないボタンが完成しました。参考にさせていただいたブログ、ネットの方々のおかげです。ありがとうございました。