CSS でボタン押下効果を実現する正しい方法

Question

CSS を使用してピアノのレイアウトを作成しています。 私はこの「ボタンを押した」エフェクトがとても気に入っていますが、周囲の要素が変化します。この状況を回避するにはどうすればよいでしょうか?

リーリー リーリー

ボタンの位置はグリッドを使用して実現されます。 ありがとう！

Answer 1

ボタン要素のタイプを変更できます。以下にそれを共有させてください。

リーリー リーリー

Answer 2

:active 疑似クラスの margin を調整する代わりに、transform 属性を使用できます。 transform プロパティを使用すると、周囲の要素のレイアウトに影響を与えることなく、ボタンをわずかに拡大縮小したり、押したときに下に移動したりできます。

リーリー