【CSS】押し込み式ボタンで前後の要素も一緒に動くのが地味に気になる件

CSSを語れるほど詳しくないんだけど、ボタンリンクとかで押し込み式のボタンが欲しいな～と思っていた。

下のようなボタン。

BUTTON

でもこのボタンにマウスホバー時やクリックした時の動作を加えると、前後の要素まで動いてしまう。下のボタンにマウスを乗せると分かります。

BUTTON

【私はボタンと一緒に動くテキストです】

これが地味に気になるので色々調べたけど、marginが関係しているとこまでは分かった。しかし、CSSを触っているとぶち当たる壁「marginの相殺」と言う訳の分からない現象でもう頭がこんがらがってしまう。

このmarginの相殺っていつもニヤニヤしながら初心者のとこにやってきて「もっと勉強して出直してきてね(笑)」って帰って行くんだよ・・

このmarginの相殺とは、要素が前後に並んでいて、それぞれの要素にmarginを設定している場合に起こる現象。

つまり、ボタンにmarginを設定していてその前後にある要素にもmaginが設定されているとmarginの相殺が起こる。

marginの相殺が起こった場合、どちらか片方のmarginだけが適用される。適用されるのはmarginの値が大きい方だ。

ってことは「どちらかのmarginを無効にすればボタン前後のテキストは動かないのか？」って思ったんだけどそう単純なことじゃないみたい。

ボタンのCSSは下のようになっている。

 
「あれ？magin設定してないやん！」

もう訳が分からない。

ボタン自体はdisplay:inline-blockでpaddingを調整できるようにしている。

そしてborder-bottomでボタンの影を作り、マウスホバーの際にborder-bottom:noneで影を消す。消した影のピクセル分だけtransform:translateYで下に移動させる。

上のCSSで言うと下に4px移動している。ちなみにtransform: translate3d(0,4px,0)でも同じく下に動かすことが可能。(X軸,Y軸,Z軸)なのでY軸だけを指定する。

ボタンを下に移動させるからボタンより下の要素は全て動くようになっているのか？

と言うことはdisplay:inline-blockではなくposition:relativeを使えばいいわけだ。

position:relativeは要素の表示位置を現在位置から相対的に動かすことができる。

つまり、下のようなCSSになる。

 
これで前後の要素は動かなくなった。

BUTTON

【私はもうボタンに付いて行きません。さようなら。】

しかーし！！この問題より以前に気になっていたことがもう1つある。それは押し込み式ボタンの端っこにマウスが乗った時にボタンが震えだすと言う現象。会いたくて震えるのとは訳が違う。

ねぇねぇこれ見てこれぇ！

めっちゃ震えてるでしょ？

ただね、この対策も調べていたんだけどまたmaginの相殺が出てくるんだよ・・勘弁してくれ・・

この現象の場合は、paddingで相殺は起きないと言う特性を利用して、box要素(divなど)の中にボタンを配置し、paddingの値で動かすと現象は治るみたい。

でも実際に動作確認すると、ボタンが震える現象は治るけど、前後の要素がまた動くと言う結果に・・

今はこの現象をなんとかしたいんだけど誰か知ってる人いたら教えてください。

地頭の悪い私にはもう分からない。難しい。こんなことに時間使う暇あるなら記事を書いた方がマシなんだけど、気になる。