I'm using CSS to create a piano layout. I really like this "button pressed" effect, but it changes surrounding elements. How to avoid this situation?
<main> <div id="o-2" class="octave"> <button id="C2" class="C key"></button> <button id="C2-sharp" class="C-sharp key-black"></button> <button id="D2" class="D key"></button> <button id="D2-sharp" class="D-sharp key-black"></button> <button id="E2" class="E key"></button> </div> </main>
main { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .octave { display: grid; grid-template-rows: 25% 25% 25% 25%; grid-template-columns: repeat(14, auto); } button { border: 1px solid black; margin: 1px; box-shadow: 5px 5px 5px black; cursor: pointer; } button:active { margin-left: 4px; margin-top: 4px; box-shadow: 1px 1px 5px black; }
The positioning of buttons is achieved using grids. Thanks!
P粉7544773252023-09-10 12:45:44
You can change the button element type. Let me share it below.
main { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .octave { display: grid; grid-template-rows: 25% 25% 25% 25%; grid-template-columns: repeat(14, auto); } a { border: 1px solid black; margin: 1px; box-shadow: 5px 5px 5px black; cursor: pointer; width:14px; height:30px; } a:active { margin-left: 4px; margin-top: 4px; box-shadow: 1px 1px 5px black; }
<main> <div id="o-2" class="octave"> <a id="C2" class="C key"></a> <a id="C2-sharp" class="C-sharp key-black"></a> <a id="D2" class="D key"></a> <a id="D2-sharp" class="D-sharp key-black"></a> <a id="E2" class="E key"></a> </div> </main>
P粉4642089372023-09-10 09:54:29
You can use the transform
attribute instead of adjusting the margin
in the :active
pseudo-class. The transform
property allows you to scale the button slightly and move it downwards when pressed, without affecting the layout of surrounding elements.
... button { border: 1px solid black; margin: 1px; box-shadow: 5px 5px 5px black; cursor: pointer; transition: transform 0.2s ease; /* Add a smooth transition */ } button:active { transform: scale(0.95) translateY(3px); /* Scale down and move down */ box-shadow: 1px 1px 5px black; }