On line-height change, adjacent buttons and text below buttons move down when one button is clicked - html

Question

I have a .button class which on the active state adds an inset box shadow and increases the line-height by 2 to give a button press effect. But the button adjacent to it and the text below it also move down which I do not want. Could you please tell me how can I achieve this effect without the anything else moving?
Note: I only want the text inside the button to move down by 2px on button press and hence I chose using the line-height.
.button{
display: inline-block;
height: 36px;
padding: 0 18px;
background: cyan;
color: black;
border: none;
line-height: 36px;
margin: 6px;
}
.button:active, .button:focus{
outline: none;
}
.button:active{
box-shadow: 0 2px 0 0 blue inset;
line-height: 38px;
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>

Answer 1

Just add vertical-align: top; to your .button styles.
Default value of vertical-align property is base-line. When one button is focused, because of change in its line-height, alignment of .button elements gets disturbed and as a result it push down the below content.
.button{
display: inline-block;
vertical-align: top;
height: 36px;
padding: 0 18px;
background: cyan;
color: black;
border: none;
line-height: 36px;
margin: 6px;
}
.button:active, .button:focus{
outline: none;
}
.button:active{
box-shadow: 0 2px 0 0 blue inset;
line-height: 38px;
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>

Answer 2

I would suggest making the line height 38px and adding transparent box shadow (of the same height) when button is not active. This way in active state nothing will be moved.

Answer 3

You can try this with a transformation:
.button{
display: inline-block;
height: 36px;
padding: 0 18px;
background: cyan;
color: black;
border: none;
line-height: 36px;
margin: 6px;
}
.button:active, .button:focus{
outline: none;
}
.button:active{
box-shadow: 0 2px 0 0 blue inset;
transform:translateY(2px);
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>