I am facing a challenge with my .button class. When the button is in its active state, I have added an inset box shadow and increased the line-height by 2 to create a button press effect. However, the adjacent button and text below it also move down, which is not desired. Can you suggest a way to achieve this effect without causing any other elements to move?
Note: My goal is for only the text inside the button to move down by 2px when pressed, which is why I opted to adjust 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>